11 ms·

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

93 points by mmastrac 12y ago

Alex3917 12y ago
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 12y ago
  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.
  - mmastrac 12y ago
    I'm really looking forward to CSS selectors level 4. That spec will include a new parameter to nth-child: nth-child(3 [of S]), where S can be any further selector. http://dev.w3.org/csswg/selectors-4/#child-index http://dev.w3.org/csswg/selectors-4/#child-index
  - kmz 12y ago
    Actually just found out about -of-type's, very powerful.
- psychometry 12y ago
  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.
  - Alex3917 12y ago
    I agree that classes are the best bet. In terms of colgroup, the one issue is that it won't work if you're using colspan on only a subset of your rows.
  - slang800 12y ago
    It's probably even easier to just put inline styles on every row, but neither of those practices are going to result in maintainable markup. By adding classes for the singular purpose of styling them, you tie your markup to the appearance of the web page. Instead, classes should be used to further describe the contents of elements in relation to each other. Then all the presentational rules can be kept in CSS, and selectors can be used to style based on the meaning of the content. This means the style of the page can change without modifying the markup. And if the styles are written well enough, they can be applied to any (sane) markup. Oh and +1 for colgroup!
detaro 12y ago
In his example image gallery, the image heights are all slightly different, which looks a bit jarring.
- mmastrac 12y ago
  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.
  - detaro 12y ago
    Ok, I was wondering if it wasn't a rendering bug that was somehow caused by the CSS, which would have been bad.
pyrocat 12y ago
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 12y ago
  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.
  - mmastrac 12y ago
    Thanks for the feedback -- that wasn't clear and I'll update the example and text to be clearer.
    - code_duck 12y ago
      There's a typo too, 'adjacant' for 'adjacent'. I spent a moment wondering what adjacant meant.
      - mmastrac 12y ago
        Thanks, that's also fixed.
xatnys 12y ago
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-number-with-css3/ 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 12y ago
  Lea Verou's article is from 2011 and this article is basically a repost from 2015.
Animats 12y ago
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 12y ago
  You consider sanely styling the layout of images to be general programming?
graycat 12y ago
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 12y ago
  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.
  - jenscow 12y ago
    and maintainable.
    - graycat 12y ago
      It sounds like you have in mind a set of likely changes and have designed the HTML, CSS, and JavaScript to make the changes in that set relatively easy. Okay. For my Web pages, I questioned if that candle was worth a match. Or another such analogy goes, "Don't build a brick outhouse.". Or as I wrote, as simple as possible but not simpler. It's just a Web page! But that's the way I've been thinking and posted here to see where people differ in their thinking. One possible issue is changing where the text, pictures, video clips, ads, etc. are depending on the number of pixels or whatever in the user's screen, browser window, etc. For my pages, I just decided not to do that -- I just didn't see any very big reason to do that. Or, if a user gets used to my Web pages, then they will still have the same layout -- text, text boxes, URLs, ads, links to Help, etc. on any other screen, with any other browser, etc. Is it really important to change what the page looks like depending on the user's screen size? Or, if we know what text, ads, text boxes, etc. we want, can't we just display it, basically one way for everyone? Why so important to change? As a programmer it's more work for me, and as a user I just want it simple.
ecesena 12y ago
In the example, I'd suggest to make 4th with 2x2 big pics, like 7th and 10th.

93 points by mmastrac 12y ago

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 12y ago
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.
- mmastrac 12y ago
  I'm really looking forward to CSS selectors level 4. That spec will include a new parameter to nth-child: nth-child(3 [of S]), where S can be any further selector. http://dev.w3.org/csswg/selectors-4/#child-index http://dev.w3.org/csswg/selectors-4/#child-index
- kmz 12y ago
  Actually just found out about -of-type's, very powerful.
psychometry 12y ago
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.
- Alex3917 12y ago
  I agree that classes are the best bet. In terms of colgroup, the one issue is that it won't work if you're using colspan on only a subset of your rows.
- slang800 12y ago
  It's probably even easier to just put inline styles on every row, but neither of those practices are going to result in maintainable markup. By adding classes for the singular purpose of styling them, you tie your markup to the appearance of the web page. Instead, classes should be used to further describe the contents of elements in relation to each other. Then all the presentational rules can be kept in CSS, and selectors can be used to style based on the meaning of the content. This means the style of the page can change without modifying the markup. And if the styles are written well enough, they can be applied to any (sane) markup. Oh and +1 for colgroup!

detaro 12y ago

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

mmastrac 12y ago
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.
- detaro 12y ago
  Ok, I was wondering if it wasn't a rendering bug that was somehow caused by the CSS, which would have been bad.

pyrocat 12y ago

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 12y ago
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.
- mmastrac 12y ago
  Thanks for the feedback -- that wasn't clear and I'll update the example and text to be clearer.
  - code_duck 12y ago
    There's a typo too, 'adjacant' for 'adjacent'. I spent a moment wondering what adjacant meant.
    - mmastrac 12y ago
      Thanks, that's also fixed.

xatnys 12y ago

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-number-with-css3/ 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 12y ago
Lea Verou's article is from 2011 and this article is basically a repost from 2015.

Animats 12y ago

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 12y ago
You consider sanely styling the layout of images to be general programming?

graycat 12y ago

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 12y ago
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.
- jenscow 12y ago
  and maintainable.
  - graycat 12y ago
    It sounds like you have in mind a set of likely changes and have designed the HTML, CSS, and JavaScript to make the changes in that set relatively easy. Okay. For my Web pages, I questioned if that candle was worth a match. Or another such analogy goes, "Don't build a brick outhouse.". Or as I wrote, as simple as possible but not simpler. It's just a Web page! But that's the way I've been thinking and posted here to see where people differ in their thinking. One possible issue is changing where the text, pictures, video clips, ads, etc. are depending on the number of pixels or whatever in the user's screen, browser window, etc. For my pages, I just decided not to do that -- I just didn't see any very big reason to do that. Or, if a user gets used to my Web pages, then they will still have the same layout -- text, text boxes, URLs, ads, links to Help, etc. on any other screen, with any other browser, etc. Is it really important to change what the page looks like depending on the user's screen size? Or, if we know what text, ads, text boxes, etc. we want, can't we just display it, basically one way for everyone? Why so important to change? As a programmer it's more work for me, and as a user I just want it simple.

ecesena 12y ago

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