View Single Post
Old 11-07-2012, 11:28 AM   PM User | #7
Custard7A
Regular Coder

 
Custard7A's Avatar
 
Join Date: Jul 2010
Location: Australia
Posts: 269
Thanks: 32
Thanked 32 Times in 32 Posts
Custard7A is an unknown quantity at this point
You could do an inheritance selector, which could make this really easy for you.

Code:

// Selects anchor elements inside list items.

 li a { }
That would style all anchor elements inside list items, if you want to make a more specific selector, I'd recommend this:

Code:

// Only selects anchor elements inside list items, that are inside <ul id="menu">.

ul#menu li a { }
The nice thing about inheritance selectors, is that you don't need to add IDs or classes to everything.

Have you considered styling the <ul> itself? That would do the job nicely, if you intend to change all fonts in the list that is.

Code:

// I would apply all styles I know would be inherited here.

 ul#menu { color: #000; font-face: Arial; }

// I would then stylize the list items.

 ul#menu li { list-style-type: square; }

// If need be, I would clean up default link styles.

 ul#menu li a { text-decoration: none; color: inherit; }
Considering VIPStephan's input, you might want to use other elements for your purposes, but it would be the same principle.

Code:

css
   .menu { color: #000; font-face: Arial; }

 .menu a { display: inline-block; }

html

<section class="menu">
 <a href="/"> Home </a>
 <a href="/"> Home </a>
 <a href="/"> Home </a>
</section>
Custard7A is offline   Reply With Quote