div - title label html
CSS siguiente elemento (5)
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;
}
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.
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.
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/
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.
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