CSS comment sélectionner le premier élément après un autre élément

Question

J'ai le code HTML suivant sur une page

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

Dans mon css, j'ai le sélecteur suivant pour nommer l'élément H4. Le code HTML ci-dessus est juste une petite partie du code entier, il y a plusieurs div plus enveloppés appartenant à un shadowbox

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

Donc, j'ai le style correct pour mon élément H4, mais je veux aussi styler la balise de paragraphe dans mon HTML. Est-ce possible avec les sélecteurs CSS? Et si oui, comment puis-je faire cela?

Answer 1

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

C'est ce qu'on appelle le sélecteur de fratrie adjacent .

Answer 2

Pour votre exemple littéral, vous voudriez utiliser le sélecteur adjacent (+).

 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>
 

Toutefois, si vous souhaitez sélectionner tous les paragraphes successifs, vous devez utiliser le sélecteur de frères et sœurs général (~).

 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>
 

Malheureusement, il est connu d'être buggé dans IE 7+ .

Answer 3

Il suffit de taper dessus pour essayer de résoudre ce type de problème moi-même.

J'ai fait un sélecteur qui traite l'élément après avoir été autre chose qu'un p.

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

J'espère que cela aide tous ceux qui le trouvent :)