Abusing CSS3's nth-child selector to invent new ones

[Alex3917]

Be careful with nth-child -- my advice is to only use it with lists where every item is of the same type. It's tempting to start using it with things like tables to style your rows super quickly, but then the second you need to add a single row or column then everything breaks and you need to spend half the day fixing something that should have taken about 5 minutes.

[91bananas]

For this reason I am much more a fan of nth-of-type, and all of the -of-type's, since they actually look at the element type and can say, I should style this one but not anything else that may appear at the same level.

[psychometry]

Since most tables are generated programmatically these days, it's probably easier just to use classes for this kind of styling. And it seems a lot of people forget about the <colgroup> HTML element, which makes it easy to style columns without adding classes to every table cell.

[xatnys]

Nicely done -- this reminds me of a technique outlined by Andre Luis and Lea Verou here: http://lea.verou.me/2011/01/styling-children-based-on-their-...

Building on these selectors and giving them meaningful names is a nice way of taking it a step further.

[niutech]

Lea Verou's article is from 2011 and this article is basically a repost from 2015.

[graycat]

High level question: Why do we need to care about such things? Or, what's wrong with just HTML and just some simple usage of old CSS3 or whatever it was? That is, why do Web pages need to be so complicated? Since we have decades of word whacking software without such features, why do we need such features now?

My Web pages are all really simple: Each is 800 pixels wide, with just a little use of CSS and then nearly all just HTML, with the layout using tables. I have yet to write a single line of JavaScript although Microsoft's ASP.NET writes a little for me.

To me, my Web pages look quite functional, usable, easy to understand and use, etc.

For the need for a lot more, I don't get it and worse: On the Internet I see a lot of really complicated Web pages that jump around while loading and then again when I use my mouse to put the page into the focus and use the scroll wheel on the mouse to scroll the page. I don't like the jumping around.

Why go to the trouble to build such complicated Web pages?

I'm not criticizing but trying to learn and inviting answers.

Why bother? HTML was just another text markup language, and nice, and CSS helped a little. Isn't that enough?

I learned some HTML, and it was fine, and now I want to move on and just use it and not stop here and make a career out of adding unbounded complexity.

Shouldn't things be as simple as possible but not simpler? Why be so complicated? To me, the complicated Web pages I see are a disaster, slow down my computer, etc. -- I'd much rather have just simple Web pages with old HTML, only simple CSS, and little or no JavaScript.

[rrrx3]

Sorry, can't and won't get onboard with this. It's not 1995 anymore. Join the rest of us in the 21st century with pages that are functional and attractive.

[jordanroher]

Because going to all this trouble has distinct advantages.

- With media queries in CSS my page can be responsive, scaling its size and content from 320px smartphones to multi-monitor desktops. I don't have to build and maintain multiple pages or specifically target individual devices. - Using semantic tags makes it simpler for search engines to index your content and for visually impaired people to use screen readers and understand it. - With advanced JavaScript I can reduce the friction of multi-page forms. AJAX lets us do instant checks on data against a remote database without loading the rest of the layout. Google helpfully suggests the rest of your query as you type.

Of course, it's not hard to go overboard with modern web tech, and these features can introduce bugs and alienate users running old hardware and software. But such is the price of progress.

[slang800]

I certainly agree that some (probably most?) web pages have way more UI logic than they need to present the information to the user. Loading animations, back-to-top buttons, fixed position headers, social-share bars, and so many more UI components are totally unnecessary.

However CSS does have an important place even in the most basic presentation of information: proper styling can vastly improve readability. Especially on mobile devices where the layout must change to fit the device and a fixed 800px is totally unacceptable. This adaptation to fit the device is what sets webpages apart from more rigidity constrained types of documents.

Also, there's some degree of artistic expression in a nicely designed webpage... It's beside the point of why extensive styling capabilities are "needed", but that's part of why they're so popular.

[saraid216]

> Why bother?

You're basically asking why half of us bother doing our jobs. It's not that you're criticizing; it's that you're cheerfully insulting people while pretending to be inquisitive about something you have no interest in learning about.

You don't care about this? That's great. Don't care. The people who built it aren't asking you to care.

[gentle-one]

You definitely don't create website on a professional level. If you want to build hobby websites with a fixed width of 800px as it is 1995... that's up to you. Complicated webpages don't have to be slow... if you landed on such one, then you've landed on a website created by an amateur.

[kaishiro]

You keep bringing up your sites that seem to work great everywhere. Care to share one?

[pyrocat]

I've read the ":NTH-OF-M-CHILD" section about five times through now and I still don't understand what objects you're trying to select or why. A clearer explanation would be helpful.

"For example, we can style the third element, if and only if it’s one of five children:" That makes sense, except your example has a red background, not a green one, and for some reason the 9th row has a red tile, which doesn't match your requirement that it be "one of five children". Very confusing.

[Kronopath]

If you look at the source for that example, he actually has 2 selectors that set an item to red, corresponding to the 3rd item in a group of 5 and the 7th item in a group of 9 (Formatted here for legibility):

    span:nth-child(3):nth-last-child(3){
        background-color:red !important;
    }

    span:nth-child(7):nth-last-child(3){
        background-color:red !important;
    }

That threw me for a bit of a loop too. "Wait, is that second item supposed to be red?" It would be clearer if the example and the demo matched up.

[detaro]

In his example image gallery, the image heights are all slightly different, which looks a bit jarring.

[mmastrac]

That was a result of downloading slightly different image sizes from placekitten so they weren't all the same image -- I'll resize them all to 640x480 to fix that.

[ecesena]

In the example, I'd suggest to make 4th with 2x2 big pics, like 7th and 10th.

[Animats]

Oh, joy. A feature intended to allow making alternate rows in a table different colors is being abused for general programming. Remember where the C++ template mess took that language. Don't go there.

[exogen]

You consider sanely styling the layout of images to be general programming?