With the first selector, anytime the browser comes across an anchor element it has to march up the DOM to see if it is a descendant of a div.navlinks. A document may very likely contain dozens or even hundreds of anchor elements that are not a descendant of a div.navlinks. Each of these anchors incurs a performance penalty even though the selector does not match.

With the second selector, anytime the browser comes across an anchor element it simply needs to check if it has the class navlink. If it doesn’t, then it can dismiss the CSS selector for this anchor.

See http://code.google.com/speed/page-speed/docs/rendering.html for details on using efficient CSS selectors.

- “space-separated words in your class values” : gramatically correct but VERY misleading
- “Multiple-word class names” : utterly wrong ! These are multiple class names.

It really looks like you did not understand the mechanism altogether.

An element can be assigned multiple classes. Period. No fuzzy magic involved.

Make no mistake, I find your taking time to share your discoveries very valuable, I am doing by best to do it myself. Keep going.

Vs

where in four are in single CSS File, so the server request is 1 only.

.w120{width:120px;}
.h120{height:120px;}
.fleft{float:left;}

.blockA={width:120px;height:120px;float:left;}

Of course, it’s been almost four years now since the original post, so I don’t recall the original project constraints—there may have been some reason that a list wasn’t acceptable in those circumstances. Doing things the list way is certainly a fine way to go; I’ve done it myself many a time. Doing the links as bar-separated text also works, of course, though it doesn’t offer nearly the same level of styling flexibility.

I would have done something like this:

<ul class="navLinks">
<li><a href="blah01">Blah01</a></li>
<li><a href="blah02">Blah02</a></li>
<li><a href="blah03">Blah03</a></li>
<li><a href="blah04">Blah04</a></li>
<li class="last"><a href="blah05">Blah05</a></li>
</ul>


I’d then apply a border-right to all li tags except the last (accessible by the ‘last’ class)

Funny that nobody else noticed or mentioned that in the 3.5 years since I wrote the post. Well, that’s why I leave comments open indefinitely!

Your example of the presentation of a negative number subtotal,
(-$422.72)
seems to overlook the fact that the use of red (via CSS) obviates the need for parentheses and minus sign.
That is, parentheses are an old-fashioned accountant’s method for indicating a negative quantity (when numbers must be black), while the minus sign is the traditional mathematician’s method for doing the same.

To repeat the point another way, parens OR the minus sign OR red type all indicate individually that a number is negative. It’s odd to use more than one of these methods simultaneously.

verry good CSS coding. Thanks for the tipp.
Greeting from Germany
Sven Fischer