Sélectionnez le premier élément apparaissant après un autre élément

113

J'ai le code HTML suivant sur une page:

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

Dans mon, .cssj'ai le sélecteur suivant pour styliser l' h4élément. Le code HTML ci-dessus n'est qu'une petite partie du code entier; il y en a plusieurs divautres qui appartiennent à une shadowbox:

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

Donc, j'ai le bon style pour mon h4élément, mais je veux aussi styliser la pbalise dans mon HTML.

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

html css css-selectors Rob
la source

Réponses:

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

C'est ce qu'on appelle le sélecteur frère adjacent .

Phrogz
la source
1
Une alternative consiste à utiliser JS pour trouver vos h4éléments, passer au frère suivant et y ajouter une classe CSS. Avec jQuery, ce serait simplement$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');
Phrogz
2
Notez que cela ne fonctionne que sur les éléments suivant le premier IMMÉDIATEMENT. Si vous voulez avoir le deuxième élément html suivant, vous pouvez l'enchaîner comme ceci: #selector .original + h4 + p pour obtenir le p suivant un h4 suivant un élément .original. Très utile
user1610743
30

Pour votre exemple littéral, vous voudrez 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 utiliser le sélecteur général des frères et sœurs (~).

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 bogué dans IE 7+, malheureusement .

Joël Mellon
la source
16

Frappez simplement là-dessus lorsque vous essayez de résoudre ce type de chose moi-même.

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

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

J'espère que cela aidera tous ceux qui le trouveront :)

À M
la source
9
L'utilisation des *correspond à n'importe quel élément comme décrit dans le titre. C'était un rappel utile pour moi.
James EJ
1
C'est la seule réponse qui correspond à la question. D'autres réponses nécessitent une connaissance préalable du type d'élément précédent.
Hugo Wijdeveld
0

Simplyfing pour les débutants:

Si vous souhaitez sélectionner un élément immédiatement après un autre élément, utilisez le +sélecteur.

Par exemple:

div + pL'élément "+" sélectionne tous les <p>éléments qui sont placés immédiatement après les <div>éléments

Si vous souhaitez en savoir plus sur les sélecteurs, utilisez ce tableau

Trooller
la source
0

J'utilise le dernier CSS et "+" ne fonctionnait pas pour moi donc je me retrouve avec

:premier enfant

VNicholson
la source