<div> <p>Avsnitt 1</p> <p>Avsnitt 2</p> <!-- Avsnitt 2 skal formateres --> </div>
Vi kan formatere avsnitt 2 med både :nth-child og :nth-of-type.
p:nth-child(2) { color: #930; font-weight: bold; }
p:nth-of-type(2) { color: #930; font-weight: bold; }
Hva om vi endrer litt på HTML-koden:
<div> <h1>Overskrift</h1> <p>Avsnitt 1</p> <p>Avsnitt 2</p> <!-- Avsnitt 2 skal formateres --> </div>
Da vil :nth-child formatere avsnitt 1 istedenfor avsnitt 2, siden det er element nr 2 OG det er en <p>. Legger vi til enda flere elementer foran avsnitt 1 i koden over vil altså ingen av avsnittene bli formatert med :nth-child.
p:nth-child(2) { color: #930; font-weight: bold; } /* formaterer nå avsnitt 1 istedenfor avsnitt 2 */
Mens :nth-of-type fortsatt fungerer som vi ønsker og formaterer avsnitt 2, siden den retter seg mot type, altså <p>.
p:nth-of-type(2) { color: #930; font-weight: bold; }
Hvilke nettlesere støtter dette?
Del denne artikkelen: