•  
     

nth-child - HTML e CSS

o pseudo seletor de classe nth-child

Adicione o número entre parênteses depois do pseudo seletor de classe. Por exemplo,

Código: Selecionar todos

p:nth-child(2) {
    color: red;
}

Deveria fazer com que todos os parágrafos que são segundos filhos de seu elemento pai ficassem vermelhos.

O elemento que é a criança vai antes de :nth-child; seu pai é o elemento que o contém.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<p>Sou o primeiro filho!</p>
<p>Nós não.</p>
<p>Nós não.</p>
<p>Nós não.</p>
<p>Nós não.</p>
<p>Nós não.</p>
<p>Nós não.</p>			
</div>
</body>
</html>


CSS

Código: Selecionar todos

p:nth-child(2){
font-family:Tahoma;   
}
p:nth-child(3){
color:#CC0000;  
}
p:nth-child(4){
background-color:#00FF00;  
}
p:nth-child(5){
font-size:22px;
}


Demo: http://jsfiddle.net/c3jq98xc/