web-dev-qa-db-fra.com

Sélectionner le premier élément survenant après un autre élément

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 le h4 élément. Le code HTML ci-dessus n'est qu'une petite partie du code entier; il y a plusieurs divs plus entouré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 h4, mais je veux aussi styliser la balise p dans mon code HTML.

Est-ce possible avec les sélecteurs CSS? Et si oui, comment puis-je faire cela?

htmlcsscss-selectors
95
Rob
#many .more.selectors h4 + p { ... }

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

180
Phrogz

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>

Il est connu que c'est buggy dans IE 7+ malheureusement) .

27
Joel Mellon

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 :)

14
Tom