Quelle est la syntaxe du sélecteur en CSS pour l'élément suivant?

200

Si j'ai une balise d'en-tête <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

et après cela j'ai un paragraphe <p>stuff here</p>.

Comment puis-je m'assurer d'utiliser CSS que chaque <p>balise qui suit le h1.hc-reformà utiliser:clear:both;

serait-ce:

h1.hc-reform > p{
     clear:both;
}

pour une raison quelconque, cela ne fonctionne pas.

html css css-selectors siblings tony noriega
la source

Réponses:

397

Ceci est appelé le sélecteur de frère adjacent , et il est représenté par un signe plus ...

h1.hc-reform + p {
  clear:both;
}

Remarque: cela n'est pas pris en charge dans IE6 ou version antérieure.

Josh Stodola
la source
4
Cela ne sélectionnerait pque ce qui vient juste après h1.hc-reform. Là encore, il pourrait être le seul sur lequel il clear: bothfaut appliquer pour que cela fonctionne, car il efface simplement le h1flotteur, donc c'est toujours une réponse valide.
BoltClock
@BoltClock Oui, vous avez raison, j'ai mal lu la spécification et supprimé ce commentaire car c'était faux. Ce sélecteur ne correspondra qu'à celui pqui est immédiatement précédé de h1.hc-reform(avec le même élément parent, bien sûr).
Josh Stodola
4
wow ne connaissait pas le sélecteur de frère adjacent. Bien, merci!
théoriser
1
~ est un meilleur sélecteur dans ce cas. Ici , un travail jsFiddle jsfiddle.net/dZAtt
ProblemsOfSumit
à noter que cela ne fonctionne pas si le premier élément a des enfants
72GM
60

Vous pouvez utiliser le sélecteur frère ~ :

h1.hc-reform ~ p{
     clear:both;
}

Cela sélectionne tous les péléments qui viennent après .hc-reform, pas seulement le premier.

Stephan Muller
la source
Les bogues IE dans le premier lien sont des trucs de bord obscurs, c'est probablement pourquoi quirksmode les ignore.
Hache.
14

non >est un sélecteur d'enfant.

celui que tu veux c'est +

alors essayez h1.hc-reform + p

le support du navigateur n'est pas génial

Moin Zaman
la source
2020: la prise en charge du navigateur est excellente après dix ans. Juste une info pour les novices CSS.
AlexioVay
8

Le >est un sélecteur d'enfant . Donc, si votre code HTML ressemble à ceci:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... alors c'est votre ticket.

Mais si votre code HTML ressemble à ceci:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Ensuite, vous voulez le sélecteur adjacent :

h1.hc-reform + p{
     clear:both;
}
Richard JP Le Guen
la source
4
J'espère bien qu'il n'a pas imbriqué de p à l'intérieur de h1. De plus, adjacent ne sélectionne que le premier p.
Stephan Muller
2

Pas exactement. Le h1.hc-reform > psignifie "tout pexactement un niveau en dessous h1.hc-reform".

Ce que tu veux c'est h1.hc-reform + p. Bien sûr, cela peut entraîner des problèmes dans les anciennes versions d'Internet Explorer; si vous voulez rendre la page compatible avec les IE plus anciens, vous devrez soit ajouter une classe manuellement aux paragraphes ou utiliser du JavaScript (dans jQuery, par exemple, vous pourriez faire quelque chose comme $('h1.hc-reform').next('p').addClass('first-paragraph')).

Plus d'informations: http://www.w3.org/TR/CSS2/selector.html ou http://css-tricks.com/child-and-sibling-selectors/

Justin Russell
la source