Use efficient CSS selectors

[valanews]

I validated my website on
"css validator" and "xhtml validator".
now everything is ok but when I check my site on "gtmetrix.com"
I get this error:

#ja-container ul.menu li li
Tag key with 3 descendant selectors and Class overly qualified with tag

in my css file:

#ja-container ul.menu li li{
background:none;
border:none}

#ja-container ul.menu li li a{
color:#b3b3b3;
font-size:92%;
font-weight:400!important;
text-indent:15px;
text-transform:none;
width:100%
}


what is the wrong? I think that css code is normal!

[edited by: alt131 at 5:24 pm (utc) on Aug 13, 2011]
[edit reason] Thread Tidy [/edit]

[Paul_o_b]

If there is only one ul.menu in your page then the id is irrelevant (apart from specificity) and can be omitted.

ul.menu li li{}

If specificity is an issue and if you still only have one ul.menu in your page then you can omit the ul.menu from the rule above instead of the id as the target will still be reached.

#ja-container li li {}

The only time you would need your original rule is if within the context of #ja-container you had other uls (not the ones within ul.menu) or if indeed ul.menu was itself nested within another ul or if there were any ul.menu outside of the id.

I think I just made that sound more complicated than it is :)

[lucy24]

I think I just made that sound more complicated than it is

"If you've only got one of something, it doesn't need a class." :)

[alt131]

Hi valanews, and welcome to WebmasterWorld :)

what is the wrong? I think that css code is normal!

Good on you for bothering to validate - and I think you've raised the really good issue that this sort of code is seen so often it has become "normal". To my mind this is a situations where "what is commonly used" is not the same as "best practise".

Recall the validator checks for whether code is valid - not whether it is efficient, or even "necessary" as explained by Paul and Lucy. There are many reasons code ends up being overqualified in this way, and as Paul has referred, often caused by not coding to take full advantage of the "cascade" and "specificity". That doesn't mean the code is "wrong" - but it does mean the code is far less efficient than it could be. Given one aim of code is to deliver content to users as efficiently as possible, it makes sense to give that some priority.

I think I just made that sound more complicated than it is

"If you've only got one of something, it doesn't need a class."

Both make sense to me ;)

[valanews]

Paul_o_b,ucy24,alt131
Thanks for your answers, this post was very useful for me/