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;
}
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;
}