How to use efficient CSS selectors?

Hi,

When I run the YSlow tool, it shows me below classes with very inefficient rules.

What am I suppose to do with those classes?

Please help.
* .menu li.current a    
Tag key with 2 descendant selectors and Class overly qualified with tag

* .menu li.current a b    
Tag key with 3 descendant selectors and Class overly qualified with tag

Open in new window

meetpdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Is there a specific reason for using wildcards (*)?
the inefficiency is being detected because of the asterix.

Try removing it or using the ID or class of the menu parent

For example #wrapper .menu li.current a b

Check this link for more info http://code.google.com/speed/page-speed/docs/rendering.html
0
meetpdAuthor Commented:
Actually there is no * in the class. But in Yslow it shows with asterisk.  I added #wrapperDashbd as suggested, but it now shows:

#wrapperDashbd .menu li.current a    
Tag key with 3 descendant selectors and Class overly qualified with tag

And yes, I have gone through that link..but being a beginner I am unable to understand it fully.

What should I do now?
0
remorinaCommented:
you probably don't need all the nesting as you wouldn't have a .current css except for the li element of .menu

so the additional nesting would be unnecessary, try using .current a b only which should still work.

CSS rules are matched right to left, so when YSlow interprets your CSS it will flag any unnecessary descendant selectors, so cutting down additional selectors enhances efficiency.

Descendant selectors were considered inefficient because the browser has to check all instances of the element referenced in the right-most simple selector against all possible ancestors.

With that said, the real performance gain from such optimisation would be almost negligible in most cases, but it would still be a better practice

Hope this clears things a bit
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dwaynecharringtonCommented:
Put an id on your unordered list (<ul id="navigation">) and then target each element like so #navigation .current a b should be pretty sufficient for what you need. Having .current a b by itself could be a bit silly considering you might use .current in other parts of your site.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.