Well, I have an unordered list which I want to display some links with the list items. It's more about styling the font more than anything. Not sure whether I should be setting font styles for the a, li or both?
It has always puzzled me since starting web design, whether you're meant to style the a or li when using an unordered list. I've never been able to find the answer out! My initial thoughts would be that I just style the anchor tags, as most of the examples I have seen just style them, but not all of them!
You can’t put list items inside anchor elements. Anchor is an inline element and list items are block-level elements, and block-level elements can’t go in inline elements. The other way around is possible, though.
That said, it’s really you choice which element you use for styling, especially with fonts which are inherited by children. I usually go from outside to inside, i. e. I style the outermost element(s) first and if some children require special treatment I style those.
You can’t put list items inside anchor elements. Anchor is an inline element and list items are block-level elements, and block-level elements can’t go in inline elements. The other way around is possible, though.
Thanks for your reply. I have given my list items a style of display: inline so that they display horizontally. I have seen many examples of this when looking at CSS Menu's which you can download from sites. As I say, I'm not sure if this is correct or whatnot. I've not got much time, but I will play around with that tonight and see what the results are.
Quote:
Originally Posted by VIPStephan
That said, it’s really you choice which element you use for styling, especially with fonts which are inherited by children. I usually go from outside to inside, i. e. I style the outermost element(s) first and if some children require special treatment I style those.
Thank you for the advice, I wasn't aware children inherit styles from outside elements, although now you have brought it up, it has been staring me in the face as even setting font styles on a div set the child elements to that very same font...doh!
As I say, I'll play around with it tonight and let you know the results, I've only ever created a menu where the anchor has been the outermost element of any list items.
Thanks for your reply. I have given my list items a style of display: inline so that they display horizontally. I have seen many examples of this when looking at CSS Menu's which you can download from sites.
This is invalid in terms of HTML standards. First of all, a simple list consists of two elements, ul/ol to denote that something is a list (unordered or ordered), and li to mark up every distinct item in this list. Therefore it is a requirement that list items must be direct children of the list element. There can’t be anything else as direct children of ul/ol.
Inside the list items you can put whatever elements you like but you can’t put anything you like directly inside ul or ol. This is a fact defined by the Word Wide Web Consortium as HTML standards specification. If you have seen it otherwise on websites they are wrong (and I’m wondering where you have seen that).
Basic rule of thumb: Inline elements can go into block-level elements but not vice versa. And it doesn’t matter if you style block-level elements to look and behave like inline elements, intrinsically, they are block-level elements and an HTML validator will throw an error if they are found inside an inline element.
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>
Sorry to rain on your parade, Custard, but please note HTML5Doctor’s article about the section element.
Also, there is no such thing as an “inheritance selector”. What you have described is a simple element selector because you are addressing specific elements by their name/type (as opposed to attributes or functions), inheritance has nothing to do with this.
Code:
/* simple element selectors */
div, ul li, table a {…} /* selects all div elements, all lis that are children (direct or indirect) of ul, and all a elements that are inside tables */
/* attribute selectors */
[title], [name], input[type=text] {…} /* selects all elements with “title” attribute, with “name” attribute, and all input elements with a “type” attribute whose value is “text” */
/* technically the following are attribute selectors, too */
#example, .example {…}
/* is equal to: */
[id=example], [class=example] {…}
/* or more specific: */
div[id=example], div#example {…} /* these are exactly doing the same, select divs with an ID of “example” */
/* sibling selectors */
li + li, div + a + p {…} /* selects all li that are a next sibling of another li and all p elements that follow an a element that itself follows a div */
/* direct child selectors */
li > div {…} /* selects all divisions that are direct children of list items; it would not select divisions that are, for example, inside other divisions in these list items */
Which styles are inherited depends on the styles, not on the selectors. For example, a font family is inherited by almost all elements if specified on a parent. If you set body {font-family: Tahoma;} the Tahoma font is inherited down to all elements inside the body, so you don’t have to repeat this declaration for every element (exceptions are form controls). Likewise, a color is inherited by most children with the exceptions of links where you have to specifically set it. A font size is also inherited by children, otherwise you’d have to set it on every element specifically.
Styles like backgrounds, margins, paddings, dimensions, etc. are not inherited by children, they are only applied to the elements you apply them to. And as said, this is totally independent of the selectors (as shown above) that are used.
Hah, well at least I wasn't the only one who misinterpreted <section> as another flavor for ye ol div soup. Y'know, I swear the last time I checked the HTML5 docs — a while ago that is — the definition for <section> was very vague, and only implied <section> was there for semantical purposes and liable to the users interpretation. Guess they realized that could be a bit clearer, or something, thanks for correcting me.
Yep, inheritance selector was a slip up, what I was trying to say was descendant combinator. I understand how that was confusing, and how it may have seemed like I thought inheritance was related to the selectors.
No, I wasn’t saying that setting them to display as inline element is wrong per se, I meant that putting lis into anchors is wrong, even if you make them display: inline with CSS.
The HTML validator doesn’t care about CSS styles, it only cares about the HTML, and the only valid way is to put the anchors inside the list items, not vice versa. How you make the items look with CSS doesn’t matter. And setting display: inline on them is perfectly fine.
I wanted to add just another little feature to my 'products' list'. When the user clicks an anchor and while they are viewing those products, I want to change the text to bold and also add just a tad of letter spacing. If they click another, I want to take the style off the previous product and apply it to the current element.
How can I achieve this? I searched google and this forum but people posted more specific problems with IE or FF for example.
Do you know how to add this effect? I'm going to search around and see if I can find a site which implements this just so you can see exactly what I mean as I don't think my question is very clear.
Edit: Take a look at Google . When you click Web or Images for example, there is a red font applied to the links (used as a way to show what link you are on, this is what I wanted to do).
Before you post, read our: 
. When you click Web or Images for example, there is a red font applied to the links (used as a way to show what link you are on, this is what I wanted to do).
