Selecione o primeiro elemento que ocorre após outro elemento

113

Eu tenho o seguinte código HTML em uma página:

<h4>Some text</h4>
<p>
Some more text!
</p>

No meu .css, tenho o seguinte seletor para estilizar o h4elemento. O código HTML acima é apenas uma pequena parte de todo o código; há vários divoutros agrupados pertencentes a uma caixa de sombra:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

Portanto, tenho o estilo correto para meu h4elemento, mas também quero estilizar a ptag no meu HTML.

Isso é possível com seletores CSS? E se sim, como posso fazer isso?

html css css-selectors

— Roubar
fonte

200

#many .more.selectors h4 + p { ... }

Isso é chamado de seletor de irmão adjacente .

— Phrogz
fonte

1

Uma alternativa é usar JS para encontrar seus h4elementos, caminhar até o próximo irmão e adicionar uma classe CSS a ele. Com jQuery, isso seria simplesmente$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Observe que isso só funciona em elementos que seguem o primeiro IMEDIATAMENTE. Se você deseja ter o segundo próximo elemento html, você pode encadear assim: #selector .original + h4 + p para obter op após um h4 após um elemento .original. Muito útil

— user1610743 01 de

30

Para seu exemplo literal, você deseja usar o seletor adjacente (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

No entanto, se você quiser selecionar todos os parágrafos sucessivos, precisará usar o seletor geral de irmãos (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

Infelizmente, ele tem bugs no IE 7+ .

— Joel Mellon
fonte

16

Apenas bato nisso quando tento resolver esse tipo de coisa sozinho.

Fiz um seletor que trata do elemento depois de ser algo diferente de um p.

.here .is.the #selector h4 + * {...}

Espero que ajude quem o encontrar :)

— Tom
fonte

9

O uso de *corresponde a qualquer elemento conforme descrito no título. Foi um lembrete útil para mim.

— James EJ

1

Esta é a única resposta que se ajusta à pergunta. Outras respostas requerem conhecimento prévio sobre o tipo de elemento anterior.

— Hugo Wijdeveld

0

Simplyfing para os iniciantes:

Se você quiser selecionar um elemento imediatamente após outro elemento, use o +seletor.

Por exemplo:

div + pO elemento "+" seleciona todos os <p>elementos que são colocados imediatamente após os <div>elementos

Se você quiser aprender mais sobre seletores use esta tabela

— Trooller
fonte

0

Eu uso o CSS mais recente e "+" não funcionou para mim, então acabei com

:primeiro filho

— VNicholson
fonte