div - title label html

CSS siguiente elemento

Question

si tengo una etiqueta de encabezado <h1 class="hc-reform">title</h1>

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

y después de eso tengo un párrafo <p>stuff here</p>

¿Cómo puedo decir con CSS que cada etiqueta <p> que sigue a la h1.hc-reform utiliza: clear:both;

sera eso:

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

por alguna razón, eso no está funcionando.

Answer 1

El > es un selector de niños . Entonces, si tu HTML se ve así:

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

... entonces ese es tu boleto.

Pero si tu HTML se ve así:

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

Entonces quieres el selector adyacente :

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

Answer 2

Esto se llama el selector de hermanos adyacente , y se representa con un signo más ...

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

Nota: esto no es compatible con IE6 o anterior.

Answer 3

No exactamente. La h1.hc-reform > p significa "cualquier p exactamente un nivel debajo de h1.hc-reform ".

Lo que quiere es h1.hc-reform + p . Por supuesto, eso podría causar algunos problemas en versiones anteriores de Internet Explorer; si desea que la página sea compatible con IE más antiguos, tendrá que agregar una clase manualmente a los párrafos o usar algo de JavaScript (en jQuery, por ejemplo, podría hacer algo como $(''h1.hc-reform'').next(''p'').addClass(''first-paragraph'') ).

Más información: http://www.w3.org/TR/CSS2/selector.html o http://css-tricks.com/child-and-sibling-selectors/

Answer 4

Puede usar el selector de hermanos ~ :

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

Esto selecciona todos los elementos p que vienen después de .hc-reform , no solo el primero.

Answer 5

no > es un selector de elementos secundarios.

el que quieres es +

así que intente h1.hc-reform + p

el soporte del navegador no es genial