Structural pseudo-classes vs ID’s & classes

[Steven_Domanico]

Isn’t it better to use strictly structural pseudo-classes and combinators ( example: body > div:nth-child(3) li:nth-child(n+2) ) to apply CSS styles rather then giving classes and/or ID’s to HTML tags? With all the structural pseudo-classes that we have at our disposal, we can easily target almost any tag in HTML page without giving it a class or ID. Of course, I am not suggesting to apply this practice everywhere. For example, it would be still wise to use class or ID with the “reusable” parts of HTML that might appear multiple times in several pages. But what about for the rest, especially the unique parts of HTML? Please help me with this little dilemma! Thank you.

[Senff]

I think we’ll always have to use classes and IDs, and replacing them with nth-child isn’t really an alternative, even though technically it would work.

What we’re used to:

(header here)


(content here)


(sidebar here)


(footer here)

You could replace that with:

(header here)


(content here)


(sidebar here)


(footer here)

…and then target the divs with div:nth-child(1) to div:nth-child(4).

However, it makes the markup code very non-semantic, which is also not great for SEO, and such.

Also, maintenance is going to be tedious. For example, if you want to insert a new div before the header? Then all the numbers go up with one (they are now div:nth-child(2) to div:nth-child(5)), whereas with the old method, you just add in a div before the header and you didn’t have to do anything with all the others.

So yea, it can be done, but I don’t think it should.

[Paulie_D]

Of course a lot of this was addressed by HMTL5.

Many of the ID/classes that most of use were using before are now elements in their own right…

.
Very helpful for SEO and a darn sight more semantic.

Look Ma, no classes or IDs! :)

[Author]

Posts