StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There's no way to filter by class in CSS because there's no <code>:nth-of-class()</code> selector. One way around this is to put your two different kinds of <code>div</code>s into their own groups, then select based on those groups. For example:</p> <pre><code><div class="orange"> <div></div> <div></div> <div></div> <div></div> </div> <div class="red"> <div></div> <div></div> <div></div> <div></div> </div> </code></pre> <p>With this selector:</p> <pre><code>div.red div:nth-child(2) { background: red; } </code></pre> <hr> <p>Regarding the last bit of your question:</p> <blockquote> <p>And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.</p> </blockquote> <p>For the code you give there <strong>shouldn't</strong> be any difference. I tested it, and the two pseudo-classes work as expected. But, in general:</p> <p><code>:nth-child()</code> operates on an entire level of siblings without regard for any other simple selectors. Then if the nth child is not among what's matched by the simple selectors, nothing is matched.</p> <p><code>:nth-of-type()</code> operates on a level of siblings of the given type without regard for other simple selectors. Then if the nth element occurring of that type is not among what's matched by the simple selectors, nothing is matched.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload