CSS élément suivant

Question

si j'ai une étiquette 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 que j'ai un paragraphe <p>stuff here</p>

comment puis-je dire en utilisant CSS que chaque balise <p> qui suit le h1.hc-reform à utiliser: clear:both;

serait-ce:

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

pour une raison qui ne fonctionne pas.

Answer 1

Ceci est appelé le sélecteur adjacent sibling, et il est représenté par un signe plus ...

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

Note: ce n'est pas pris en charge dans IE6 ou plus.

Answer 2

aucun > est un sélecteur d'enfant.

celui que vous voulez est +

alors essayez le soutien h1.hc-reform + p

navigateur n'est pas grand

Answer 3

Le > est un child selector. Donc, si votre HTML ressemble à ceci:

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

... alors c'est votre ticket.

Mais si votre HTML ressemble à ceci:

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

Ensuite, vous voulez que le adjacent selector:

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

Answer 4

Vous pouvez utiliser le sibling selector~:

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

Ce sélectionne tous les p éléments qui viennent un fter .hc-reform, pas seulement le premier.

Answer 5

Pas exactement. Le h1.hc-reform > p signifie "n'importe quel p exactement un niveau inférieur à h1.hc-reform". Ce que vous voulez 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 IE plus anciens, vous devrez soit ajouter manuellement une classe aux paragraphes, soit utiliser du JavaScript (dans jQuery, par exemple, vous pouvez faire quelque chose comme $('h1.hc-reform').next('p').addClass('first-paragraph')).

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