Simple css question about selectors

[da233]

Whenever I look at css tutorials, it seems that the way people write their selectors are different.

Is there any difference between:

ul#navigation {
blah blah;
}

and

#navigation ul {
blah blah;
}


Also, sometimes people write "div" in front of their classes and ids, is there a point to this? Is there a difference between:

div#header

and just

#header


Thanks in advance, though please answer only if you are 100% sure ^_^

 

[Sgraffite]

Whenever I look at css tutorials, it seems that the way people write their selectors are different.

Is there any difference between:

ul#navigation {
blah blah;
}

and

#navigation ul {
blah blah;
}

Also, sometimes people write "div" in front of their classes and ids, is there a point to this? Is there a difference between:

div#header

and just

#header


Thanks in advance, though please answer only if you are 100% sure ^_^

ul#navigation means the selector is looking for a <ul> tag with the id of "navigation".

div#header is looking for a <div> tag with the id of "header".
#header is just looking for an id of "header" anywhere.

I'm not 100% sure, as I never can be.

 

[keenan]

Being as specific as you can be is always a good idea. Remember that selectors apply to all matching elements, sometimes not just the ones you expect . Also they are hierarchical, so you can do nesting and such. Narrowing the number of DOM elements the browser has to consider during parsing may help performance as well, I've never done any testing, but it stands to reason...

ul#navigation - matches all <ul> tags with id 'navigation'
#navigation ul - matches all <ul> tags 'inside' all tags with id 'navigation' (ie. <div id='navigation'><ul> ...)

You can also do things like:

div.blogpost ul { /* styles for unordered lists in all blog post divs */}
div.blogpost div.code strong { /* strong text inside code divs that are inside blogposts */ }

And so on.

 

[da233]

Thanks for the explanation.

It seems like using the #navigation ul is much more useful as it allows for cleaner code. Why would anyone use ul#navigation instead?

Also, I'm still unclear about putting "div" in front of the "#" or "."

Is "div#blah" any different than just using "#blah" in your css file?

 

[keenan]

#navigation ul and ul#navigation do totally different things. The first is specifying uls nested inside an element with that id - two elements are involved in the match, and this could match many uls inside that id. The second is only matching on an individual element no matter where it is in the DOM tree, and that ul must have the matching id.

<div id="navigation"><ul> will match the first example, it won't match the second. ids are supposed to be unique in the DOM in XHTML, but IIRC this is not requred in HTML, so it's possible to have different elements with the same id but different types, where you would need to use the ul#navigation form instead.

I don't see the div#blah case very often in the wild, I'm sure folks use it but you're right, if you follow best practices, it doesn't really get you anything. div.blah is of course extremely useful.

 

[tim_m]

at a basic level, using element#id has no real difference than just #id since all ids are supposed to be unique. it has much more use when doing element.class since you're restricting it to only elements of that type. if you do just .class you can apply that class to any type of element that specifies class="class". now that may not have any difference if you have different class names for everything but it can let you use the same class name on different elements with different results should you desire.

more specifically, styles in element#id may override styles in #id in the event you were including multiple css files, say you needed ie6 hacks (ugh), or something else. i'm not as sure about how css selector precedence works though.

 

[TLobe00]

exactly as tim_m stated...

if you have an id for an element, using just plain #id is perfecto... but I have used the element.class method or even element element ALOT in my css... it is especially helpful if you want to style all of one type of element (i.e. all the <b> tags in a <span id="myspan"> [ span b { css } ] or [ #myspan b { css } ] )

 

[ameoba]

at a basic level, using element#id has no real difference than just #id since all ids are supposed to be unique. it has much more use when doing element.class since you're restricting it to only elements of that type. if you do just .class you can apply that class to any type of element that specifies class="class". now that may not have any difference if you have different class names for everything but it can let you use the same class name on different elements with different results should you desire.

more specifically, styles in element#id may override styles in #id in the event you were including multiple css files, say you needed ie6 hacks (ugh), or something else. i'm not as sure about how css selector precedence works though.

Listen to this man.

 

[JPWilson]

Due to specificity, I would recommend using element#id if dealing with other styles you don't have control over (or may not want to change). For example, if another style has previously defined a margin for element#id, trying to change that margin with #id will not work because element#id has a more specific selector. Aside from that, just #id should work just fine.

And as previously mentioned, "ul#navigation" is definitely not the same as "#navigation ul". The first refers to a UL element with an id of navigation. The latter refers to a UL inside ANY OTHER element with an id of navigation. So "#navigation ul" would not apply to <ul id="navigation">... but ul#navigation would.

Doing a quick search for "css specificity" should point you to a few sites with some great examples.