You can make nth-child repeat by using an arithmetic expression inside the parentheses, like nth-child(3n). They also stack, so you can create pseudorandom transformations to a sequence of elements by adding styles for the first few prime numbers.

And maybe some folks could be interested about little known fact that each selector has even a namespace part on the left; the void implicit one having effect depending on presence or absence of `@namespace` prologue in given stylesheet: - In stylesheet without explicit unnamed namespace it is like '*|', so everything is like `*|<element-selector>`; - In stylesheet with explicit unnamed namespace (`@namespace "<URI>");`) all element selectors without `<some-prefix>|<element-selector>` match only elements from that namespace. - In stylesheet with explicit named namespace (`@namespace <name> "<URI>";`) all element selectors with `<name>|<element-selector>` match only elements from that namespace.

    @namespace "bogus"; /* unnamed */
    @namespace aitchtee "http://www.w3.org/1999/xhtml";
    @namespace esvee "http://www.w3.org/2000/svg";
    * {  /* will not match anything, because "bogus" NS */ } 
    html {  /* also nothing, because "bogus" NS */ } 
    *|* { /* will match everything */ }
    aitchtee|title { /* will not match SVG title element, only the HTML one */ }
    aitchtee|*:root { /* will match html */ }
    esvee|* { /* all SVG elements */ }

Here are a couple quotes from https://developer.chrome.com/articles/css-nth-child-of-s/#pr... :

New in CSS Selectors Level 4 is the ability to optionally pass a selector list into :nth-child() and :nth-last-child().

For example, :nth-child(2 of .highlight) selects the second matching element that has the .highlight class. Put differently: out of all children with the class .highlight, select the second one.

10 years ago I created an algorithm to generalize CSS selectors based on applying the "sequence alignment" algorithm (from bioinformatics / string matching) to objects (bags of attribute / key values, ie, HTML elements). This let you select two or more examples and produce a selector that captures what you meant.

More here: https://github.com/00000o1/selector-generalization

There've been multiple attempts at such a thing over the years, but I like this approach for its essentially simple foundation in solid algorithms.

Be warned tho this code is old! I haven't yet got around to updating it to make it more "modern" etc!!

Very nice, but some of the examples could do with more elements to indicate what is _not_ selected. For example, the "child selector" image could have some more "div"s which are descendants but not direct children of the ".wrapper" element.

Very cool. It seems to be missing the begins with and ends with selectors for the attr-val.

[title^=“old”]

and

[title$=“old”]

  a[href^="tel:"]

    ^ means match input start
    $ means match input end

`* + *` works, but I think `:not(:first-child)` is a much clearer way of doing this. (Unless you need to support IE8 for some horrific reason?)

    * + *

   :where(:not(:first-child))

The ~ selector should be labeled "general sibling combinator" instead of "subsequent selector" (thanks for sharing!)

Amazing, nice curation. Had a look at the other blog posts, great work.

Wonderful. Note that :target works only after the whole page is loaded, including any JS. :has() is revolutionary, but unsupported by FF.

Nice!

Minor typo nit: the ::placeholder bold selector name has been copy-pasted in the sections for ::selection and ::marker.

I either forgot or never knew there's a difference between ".class1.class2" and ".class1 .class2" (without and with a space). I didn't even think the first is valid. That bit alone was worth the entire article for me.

Nice resource - very handy. I've shared with some slack groups I frequent and mentor in!

There's a lot of division between frontenders and non-frontenders. Project like this help making frontend concepts more accessible to other developers. Great way to make things simple here!

This is really cool and useful! I don't know a huge amount of CSS beyond the basics of tweaking sites via ublock origin or devtools, but this explained things clearly. Kudos!

What makes scrolling on this page so sluggish? (FF mobile)

A great overview! Thanks for creating this :)

Now, create a similar page for XPath...

Some typos regarding :placeholder pseudo selector - in the sections after (:marker)

Scrolling seems fine. Firefox on Pixel3

This is absolutely wonderful!

Will be so useful for me

Cool but also reminds me why I use inline styles for everything. I don't want to fiddle with selectors. I want to put the styling right on the element.

I use Tailwind when I need that.