
Abusing CSS3's nth-child selector to invent new ones - mmastrac
http://grack.com/blog/2015/01/09/abusing-css3-selectors/
======
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.

~~~
mmastrac
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)

------
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-...](http://lea.verou.me/2011/01/styling-children-based-on-their-number-
with-css3/)

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.

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

~~~
graycat
That my Web pages should work nearly everywhere is not a big deal. Instead,
it's simple. Except for a little JavaScript Microsoft writes for me, I'm just
using some simple, old HTML with a little CSS. What goes to the client is, for
the Web, just dirt simple.

Then each Web page is exactly 800 pixels wide, small screen, big screen, small
window, big window, Internet Explorer, Firefox, Chrome, etc., all the same
exactly 800 pixels wide, period. There are both vertical and horizontal scroll
bars. The content of the pages is really simple, basically just some text, a
simple PNG image, some links as at the top of these pages at HN, some simple,
standard HTML _controls_ , and nothing else. As I recall, the fonts are all 35
pixels high, that is, relatively large fonts. All the layout is with just HTML
tables -- I'm not asking the Web browser to position or scale anything. No
roll overs, pull downs, pop-ups, icons -- HN doesn't have such either.

So, on any browser window with at least 800 pixels of width, my Web pages
should look fine; some users may want to use some magnification option in
their Web browser -- I'm not going to program that logic. Simple. Dirt simple.
No doubt. That my Web pages take up only 800 pixels of width on some
workstation screen 4000 pixels wide is okay with me.

If my site has any value, then it's not in fancy HTML, CSS, or JavaScript.
Same for HN.

I can understand that for a lot of sites, there is client side JavaScript that
keeps looking at the size of the browser window and walks some tree of the
document object model or some such and dynamically positions text, ads,
images, video windows, etc. That could get complicated on one computer and
much worse on a billion computers from smartphones to workstations. For
solving that problem, I didn't figure out how or even attack it. If you are
working on such a problem, you have my sympathy; if you get a good solution,
you have my congratulations.

What I'm doing is dirt simple; no doubt you could have done it easily except
for just one issue: Do you want such a simple Web page? HN does. Some other
sites do. So do I.

But, yes, when my site goes live, I'll eagerly announce on HN. Then you can
all say that my Web pages look like they were designed by 5 year old child in
1995 in 15 minutes after stealing five beers from his parents' refrigerator --
will be about right. Even more likely, by a drunk, baby T Rex. I'm not trying
to build a brick outhouse or use a $3 million Ferrari to get six loaves of
bread and three gallons of milk. Instead, simple as possible but not simpler.

------
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.

~~~
mmastrac
Thanks for the feedback -- that wasn't clear and I'll update the example and
text to be clearer.

~~~
code_duck
There's a typo too, 'adjacant' for 'adjacent'. I spent a moment wondering what
adjacant meant.

~~~
mmastrac
Thanks, that's also fixed.

------
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.

~~~
detaro
Ok, I was wondering if it wasn't a rendering bug that was somehow caused by
the CSS, which would have been bad.

------
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?

