Qual é a sintaxe do seletor em CSS para o próximo elemento?

200

Se eu tiver uma tag de cabeçalho <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

e depois disso eu tenho um parágrafo <p>stuff here</p>.

Como posso garantir o uso de CSS para que todas as <p>tags a seguir h1.hc-reformsejam usadas:clear:both;

seria isso:

h1.hc-reform > p{
     clear:both;
}

por algum motivo que não está funcionando.

html css css-selectors siblings tony noriega
fonte

Respostas:

397

Isso é chamado seletor de irmão adjacente e é representado por um sinal de mais ...

h1.hc-reform + p {
  clear:both;
}

Nota: isso não é suportado no IE6 ou mais antigo.

Josh Stodola
fonte
4
Isso selecionaria apenas o pque vem logo depois h1.hc-reform. Por outro lado, pode ser o único que clear: bothprecisa ser aplicado para que funcione, uma vez que simplesmente limpa a h1bóia, portanto ainda é uma resposta válida.
BoltClock
@BoltClock Sim, você está correto, eu li mal as especificações e excluí esse comentário porque estava errado. Esse seletor corresponderá apenas ao pprecedido imediatamente por h1.hc-reform(com o mesmo elemento pai, é claro).
21710 Josh Stodola
4
uau não sabia sobre o seletor de irmão adjacente. Bom obrigado!
teorizar
1
~ é um seletor melhor neste caso. Aqui, um jsFiddle trabalhando jsfiddle.net/dZAtt
ProblemsOfSumit
importante notar que esta não funciona se o primeiro elemento tem filhos
72GM
60

Você pode usar o seletor de irmãos ~ :

h1.hc-reform ~ p{
     clear:both;
}

Isso seleciona todos os pelementos que vêm depois .hc-reform, não apenas o primeiro.

Stephan Muller
fonte
Os erros do IE no primeiro link são coisas obscuras, e é provavelmente por isso que o quirksmode os ignora.
Machado.
14

no >é um seletor de filhos.

o que você quer é +

então tente h1.hc-reform + p

o suporte ao navegador não é bom

Moin Zaman
fonte
2020: o suporte ao navegador é excelente após dez anos. Apenas uma informação para iniciantes em CSS.
AlexioVay 5/01
8

O >é um seletor filho . Portanto, se o seu HTML estiver assim:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... então esse é o seu bilhete.

Mas se o seu HTML estiver assim:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Então você deseja o seletor adjacente :

h1.hc-reform + p{
     clear:both;
}
Richard JP Le Guen
fonte
4
Espero que ele não aninhe p dentro de h1. Além disso, adjacente apenas seleciona o primeiro p.
23710 Stephan Stephan Muller
2

Não exatamente. Os h1.hc-reform > pmeios "qualquer pexatamente um nível abaixo h1.hc-reform".

O que você quer é h1.hc-reform + p. Obviamente, isso pode causar alguns problemas nas versões mais antigas do Internet Explorer; se você quiser tornar a página compatível com IEs mais antigos, será necessário adicionar uma classe manualmente aos parágrafos ou usar algum JavaScript (no jQuery, por exemplo, você pode fazer algo assim $('h1.hc-reform').next('p').addClass('first-paragraph')).

Mais informações: http://www.w3.org/TR/CSS2/selector.html ou http://css-tricks.com/child-and-sibling-selectors/

Justin Russell
fonte