: o primeiro filho não funciona como esperado

96

Estou tentando selecionar o primeiro h1dentro de um divcom uma classe chamada detail_container. Funciona se h1for o primeiro elemento dentro disso div, mas se vier depois disso ul, não funcionará.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Fiquei com a impressão de que o CSS que tenho selecionará o primeiro, h1não importa onde esteja div. Como posso fazer funcionar?

css css-selectors O Homem Muffin
fonte
1
O que o CSS não pode fazer, o JavaScript pode.
JCOC611
11
No entanto, isso é algo que você pode fazer com CSS3 :)
BoltClock

Respostas:

216

O h1:first-childseletor significa

Selecione o primeiro filho de seu pai
se e somente se for um h1elemento.

O :first-childdo contêiner aqui é o ule, como tal, não pode satisfazer h1:first-child.

Existem CSS3 :first-of-typepara o seu caso:

.detail_container h1:first-of-type
{
    color: blue;
}

Mas com os problemas de compatibilidade do navegador e outros enfeites, é melhor você dar h1uma aula ao primeiro e depois direcionar essa aula:

.detail_container h1.first
{
    color: blue;
}
BoltClock
fonte
2
Eu entendo agora, embora eu ache que eles deveriam ter implementado ambas as versões quando criaram o padrão.
The Muffin Man
Não funciona na versão do IE9. Diz h1: desconhecido na ferramenta de desenvolvedor
Cine
11
Lista de compatibilidade do :first-of-typeseletor.
Jess Telford
4
Lista de compatibilidade mais recente de :first-of-type. O link antigo está incorreto.
BadHorsie
Na minha opinião, o termo :first-childnão é claro para entender, porque você define o item como seletor CSS, digamos h1, e, subsequentemente, pensa "pegar o primeiro filho" de todos no nível DOM escolhido. Eu usei errado tantas vezes ... Temos que nos acostumar com o :first-of-typeseletor e pensar no primeiro filho desse tipo.
Kai Noack de
13

:first-childseleciona o primeiro h1 se, e somente se , for o primeiro filho de seu elemento pai. No seu exemplo, o ulé o primeiro filho do div.

O nome da pseudoclasse é um tanto enganoso, mas é explicado com bastante clareza aqui nas especificações.

O :firstseletor do jQuery oferece o que você está procurando. Você consegue fazer isso:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
fonte
Você está certo, é enganoso, principalmente fiquei confuso porque usei o jQuery para fazer isso antes.
The Muffin Man
9

Para esse caso específico, você pode usar:

.detail_container > ul + h1{ 
    color: blue; 
}

Mas se você precisa desse mesmo seletor em muitos casos, você deve ter uma classe para eles, como o BoltClock disse.

Grekz
fonte
Você não deve ter problemas. Aqui, a ref w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

você também pode usar

.detail_container h1:nth-of-type(1)

Alterando o número 1 por qualquer outro número, você pode selecionar qualquer outro item h1.

Fabrice
fonte
1

Você poderia envolver suas h1tags em outra dive, em seguida, a primeira seria o first-child. Isso divnem precisa de estilos. É apenas uma forma de segregar essas crianças.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
fonte
0

O elemento não pode herdar diretamente da <body>tag. Você pode tentar colocá-lo em uma <dir style="padding-left:0px;"></dir>tag.

Edmond Chow
fonte