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.
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.
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.
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
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;
}
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/