mozilla

Compare Revisions

:nth-child

Change Revisions

Revision 57389:

Revision 57389 by Sheppy on

Revision 57390:

Revision 57390 by Miken32 on

Title:
:nth-child
:nth-child
Slug:
CSS/:nth-child
CSS/:nth-child
Tags:
css, "CSS Reference", Selectors
css, "CSS Reference", Selectors
Content:

Revision 57389
Revision 57390
n14      The <code>:nth-child</code> pseudo-class matches an elementn14      The <code>:nth-child</code> pseudo-class matches an element
> that has <tt><i>a</i>n+<i>b</i>-1</tt> siblings before it in the> that has <code><em>a</em>n+<em>b</em>-1</code> siblings before i
> document tree, for a given positive or zero value for <tt>n</tt>>t in the document tree, for a given positive or zero value for <c
>, and has a parent element.>ode>n</code>, and has a parent element.
n17      This can more clearly be described this way: the matching en17      This can more clearly be described this way: the matching e
>lement is the <tt><i>b</i>th</tt> child of an element after all i>lement is the <code><em>b</em>th</code> child of an element after
>ts children have been split into groups of <tt><i>a</i></tt> elem> all its children have been split into groups of <code><em>a</em>
>ents each.></code> elements each.
n20      The values <tt><i>a</i></tt> and <tt><i>b</i></tt> must botn20      The values <code><em>a</em></code> and <code><em>b</em></co
>h be integers, and the index of an element's first child is 1.>de> must both be integers, and the index of an element's first ch
 >ild is 1.
n29element:nth-child(<i>a</i>n + <i>b</i>) { <i>style properties</i>n29element:nth-child(<em>a</em>n + <em>b</em>) { <em>style propertie
> }>s</em> }
n39        <tt>tr:nth-child(2n+1)</tt>n39        <code>tr:nth-child(2n+1)</code>
n45        <tt>tr:nth-child(odd)</tt>n45        <code>tr:nth-child(odd)</code>
n51        <tt>tr:nth-child(2n)</tt>n51        <code>tr:nth-child(2n)</code>
n57        <tt>tr:nth-child(even)</tt>n57        <code>tr:nth-child(even)</code>
n63        <tt>span:nth-child(0n+1)</tt>n63        <code>span:nth-child(0n+1)</code>
n69        <tt>span:nth-child(1)</tt>n69        <code>span:nth-child(1)</code>
n78    <pre>n78    <pre class="brush: css">
n87    <pre>n87    <pre class="brush: html">
n96      ... should look like ...<br>n96      ... should look like ...
n100   <span style="background-color: lime">This span is limed!</spann100   <span style="background-color: lime;">This span is limed!</spa
>>>n>
t102   <span style="background-color: lime">But this one is!</span>t102   <span style="background-color: lime;">But this one is!</span>

Back to History