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:
You could replace that with:
…and then target the divs with
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(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.