Question

I ran the Google Page Speed Firefox extension on a few pages, and under “efficient CSS selectors” it listed various things that are inefficient in my CSS.

But some of the messages seem a bit cryptic – what do these (in bold) mean:

div#menu h3.soon small
Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag

table.data tr:nth-child(2n) td
Tag key with 2 descendant selectors and Class overly qualified with tag

table.data tr.disabled td
Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag

I’m assuming they think descendant selectors are bad but there are lots of “overly qualified” as well. I probably won’t go to too much effort fixing all these up (there are many) but it would be nice to know what Google actually means here!

Answer 1

First off, I have never used Page Speed, but the message is not that cryptic if you take a second to read it.

div#menu h3.soon small

Tag key with 2 descendant selectors and ID overly qualified with
tag and Class overly qualified with
tag

Tag key with 2 descendant selectors: How many small tags do you have that are not contained in another tag with class soon? None? The CSS nesting would be totally unnecessary in this case.

ID overly qualified with tag: #menu does not need to be prepended with div.
You most likely don’t have any other tags in your markup with id menu (you shouldn’t, its an ID!), so prepending menu with div in redundant.

Class overly qualified with tag: .soon does not need to be prepended with h3.
You most likely don’t have any other tag in your markup with class soon other than h3 tags, so prepending .soon with h3 is unnecessary.

The other messages follow similarly.

-Stephen