StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First a few tidbits:</p> <ul> <li>nth-child uses <code>1</code>-based indices for matching (i.e. <code>nth-child(1)</code> is the first child, not the second)</li> <li><code>n</code> in the <code>An + B</code> notation is the iterator value</li> <li><code>n</code> starts at <code>0</code> and counts up</li> <li><code>An + B</code> will be a matched index (I'll call it <code>i</code>)</li> </ul> <p><a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">read the spec for more info</a></p> <p>If you have a set of elements you want to match, you ought to write them out:</p> <p>Example:</p> <pre><code>1st, 10th, 19th, 28th... </code></pre> <p>In this case you want to match <code>n</code> to specific indices</p> <pre><code>n | i ====== 0 | 1 1 | 10 2 | 19 3 | 28 4 | 37 etc... </code></pre> <p>If we solve for <code>An + B = i</code> using <code>n = 0</code>, <code>i = 1</code> we can get the value of B:</p> <pre><code>A(0) + B = 1 B = 1 </code></pre> <p>We can then use this value in a second substitution using <code>n = 1</code>, <code>i = 10</code>:</p> <pre><code>A(1) + 1 = 10; A = 9; </code></pre> <p>So we now have <code>9n + 1</code> for a selector to match <code>1,10,19,28,etc</code></p> <p>You can rinse and repeat for each different selection, but pretty soon you ought to realize that the repetition happens every <code>A</code> elements, and the offset is <code>B</code> elements.</p> <p><sub>The <code>nth-child</code> selector is a great real-world example of where high-school algebra is <strong>actually useful</strong></sub></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