first-child - HTML e CSS

Primeiro filho
Outro pseudo seletor de classe útil é o first-child. Ele é usado para aplicar estilo apenas a elementos que são os primeiros filhos de seus pais. Por exemplo:

Código: Selecionar todos

p:first-child {
    color: red;
}

faria com que todos os parágrafos que são os primeiros filhos de seus elementos pais ficassem vermelhos.

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:first-child{
font-family:cursive;   
}

Demo: http://jsfiddle.net/fm3k8tb2/