StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use <a href="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors" rel="nofollow noreferrer">adjacent sibling combinators</a> in conjunction with the <a href="http://www.w3.org/TR/CSS21/selector.html#first-child" rel="nofollow noreferrer"><code>:first-child</code> pseudo-class</a>, repeating the combinators as many times as you need to reach a certain nth child. This is also mentioned in <a href="https://stackoverflow.com/a/8031566/106224">an answer to a different question</a>.</p> <p>For any element <code>E</code>, start with <code>E:first-child</code>, then add <code>+ E</code> for subsequent children until you reach the element that you're targeting. You don't have to use the same element <code>E</code>, of course; you could switch that out for any type, class, ID, etc, but the important bits are the <code>:first-child</code> and <code>+</code> signs.</p> <p>As an example, to get the third <code>li</code> of its <code>ol</code>, the following CSS3 selector:</p> <pre><code>ol > li:nth-child(3) </code></pre> <p>Would be replicated in CSS2 like so:</p> <pre><code>ol > li:first-child + li + li </code></pre> <p>An illustration:</p> <pre><code><ol> <li></li>  <li></li>  <li></li>  <li></li>  </ol> </code></pre> <p>Note that since <a href="https://stackoverflow.com/questions/1817792/css-previous-sibling-selector">there are no sibling combinators that look at <em>preceding</em> siblings</a> (neither in CSS2 nor CSS3), you cannot emulate <code>:nth-last-child()</code> or <code>:last-child</code> using CSS2 selectors.</p> <p>Additionally, you can only emulate <code>:nth-child(b)</code> for one specific child at a time, where <code>b</code> is a constant number in the formula <code>an+b</code> (as described in the <a href="http://www.w3.org/TR/selectors/#nth-child" rel="nofollow noreferrer">spec</a>); you can't achieve any complex formulas with adjacent sibling combinators alone.</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