Sélectionnez d'abord survenant élément après l'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 le style de la h4 élément. Le code HTML ci-dessus est juste une petite partie de l'ensemble du code; il y a plusieurs divs plus enroulé autour de l'appartenance à une shadowbox:

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

J'ai le style correct pour mon h4 élément, mais je veux aussi le style de la p balise dans mon code HTML.

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

InformationsquelleAutor Rob | 2011-01-07
  1. 181
    #many .more.selectors h4 + p { ... }

    Ce qui est appelé la adjacent sélecteur de frères.

    • mais méfiez-vous de certains bogues d'IE, voir quirksmode.org/css/contents.html
    • Une alternative est d'utiliser JS pour trouver votre h4 éléments, à pied à la prochaine frère et ajouter une classe CSS pour que. Avec jQuery, ce serait tout simplement $('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');
    • Notez que cela ne fonctionne que sur les éléments à la suite de la première IMMÉDIATEMENT. Si vous voulez avoir le second élément html, vous pouvez la chaîne comme ceci: #sélecteur .original + h4 + p pour obtenir le p à la suite d'un h4 à la suite d'une .élément d'origine. Très utile
    InformationsquelleAutor Phrogz
  2. 28

    Pour votre littérale exemple, vous voulez 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>

    Cependant, si vous souhaitez sélectionner tous les paragraphes successifs, vous devez utilisez le sélecteur de frères (~).

    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 pour être buggy dans IE 7+, malheureusement.

    InformationsquelleAutor Joel Mellon
  3. 14

    Il suffit de frapper sur ce qui tente de résoudre ce genre de chose moi-même.

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

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

    Espère que cela aide quelqu'un qui trouve ça 🙂

    • À l'aide de la * correspond à tout élément tel que décrit dans le titre. A été un rappel utile pour moi.
    • C'est la seule réponse qui s'adapte à la question. D'autres réponses nécessitent une connaissance préalable sur le type de l'élément précédent.
    InformationsquelleAutor Tom