web-dev-qa-db-fra.com

Quelle est la syntaxe de selector en CSS pour le prochain élément?

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, avec CSS, que chaque balise <p> suivant le h1.hc-reform à utiliser: clear:both;

serait-ce:

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

pour une raison quelconque, cela ne fonctionne pas.

htmlcsscss-selectorssiblings
188
tony noriega

C'est ce qu'on appelle le sélecteur frère adjacent , et il est représenté par un signe plus ...

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

Remarque: ceci n'est pas supporté dans IE6 ou plus ancien.

373
Josh Stodola

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

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

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

56
Stephan Muller

no > est un sélecteur d'enfants.

celui que vous voulez est +

alors essayez h1.hc-reform + p

le support du navigateur n'est pas génial

13
Moin Zaman

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

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

... alors c'est votre billet.

Mais si votre 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;
}
8
Richard JP Le Guen

Pas exactement. Le h1.hc-reform > p signifie "tout p exactement un niveau sous h1.hc-reform".

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

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

2
Justin Russell