La pseudo-class CSS :nth-of-type()
coincideix amb un o m茅s elements d'un tipus determinat, en funci贸 de la seva posici贸 entre un grup de germans.
There is no `:nth-of-type(0)`!
/* Selecciona cada quart element <p> entre qualsevol grup de germans */
p:nth-of-type(4n) {
color: lime;
}
Sintaxi
La pseudo-class nth-of-type
s'especifica amb un sol argument, que representa el patr贸 per als elements coincidents.
Veure :nth-child
per obtenir una explicaci贸 m茅s detallada de la seva sintaxi.
Sintaxi formal
Exemples
Exemple b脿sic
HTML
<div>
<div>This element isn't counted.</div>
<p>First paragraph. (left aligned)</p>
<p>Second paragraph. (right aligned)</p>
<div>This element isn't counted.</div>
<p>Third paragraph. (left aligned)</p>
</div>
CSS
/* Align odd paragraphs to the left */
p:nth-of-type(2n+1) {
text-align: left;
}
/* Align even paragraphs to the right */
p:nth-of-type(2n) {
text-align: right;
}
Resultat
Especificacions
Especificaci贸 | Estat | Comentari |
---|---|---|
Selectors Level 4 The definition of ':nth-of-type' in that specification. |
Working Draft | No es requereix que els elements coincidents tinguin un pare. |
Selectors Level 3 The definition of ':nth-of-type' in that specification. |
Recommendation | Definici贸 inicial. |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Descripci贸 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport b脿sic | 1.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.1 |
Descripci贸 | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport b脿sic | 2.1 | (Yes) | 1.0 (1.9.1) | 9.0 | 9.5 | 3.1 |