Exemplu
Specificați o culoare de fundal pentru fiecare <p> element care este al doilea copil al părintelui său:
p:nth-child(2)
{
background: #ff0000;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
:nth- child( n ) selectorul se potrivește cu fiecare element care este n - lea copil, indiferent de tip, a societății - mamă.
n poate fi un număr, un cuvânt cheie sau o formulă.
Tip: Uită - te la : nth-de- type() selectorul pentru a selecta elementul care este n - lea copil, of a particular type , a societății - mamă.
| Versiune: | CSS3 |
|---|
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin selectorul.
| Selector | |||||
|---|---|---|---|---|---|
| :nth- child() | 4 | 9 | 3.5 | 3.2 | 9.6 |
CSS Sintaxa
Mai multe exemple
Exemplu
Cuvinte - cheie pare și impare sunt , care pot fi folosite pentru a se potrivi elemente copil al căror indice este par sau impar (the index of the first child is 1) .
Aici, vom preciza două fundal de culori diferite pentru elemente pare și impare p:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Încearcă - l singur » Exemplu
Folosind o formulă ( an + b ) . Descriere: a reprezintă o dimensiune ciclu, n este un contor (starts at 0) de b (starts at 0) , iar b este o valoare de offset.
Aici, vom specifica o culoare de fundal pentru toate elementele p al căror indice este un multiplu de 3:
p:nth-child(3n+0)
{
background: #ff0000;
}
Încearcă - l singur »