¿Cuál es la sintaxis para el selector en CSS para el siguiente elemento?

200

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 asegurarme de usar CSS que cada <p>etiqueta que sigue h1.hc-reforma usar:clear:both;

sera eso:

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

por alguna razón eso no funciona.

html css css-selectors siblings Tony Noriega
fuente

Respuestas:

397

Esto se llama el selector de hermanos adyacentes , y está representado por un signo más ...

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

Nota: esto no es compatible con IE6 o versiones anteriores.

Josh Stodola
fuente
44
Eso solo seleccionaría lo pque viene justo después h1.hc-reform. Por otra parte, podría ser el único al que se clear: bothdebe aplicar para que funcione, ya que simplemente borra el h1flotador, por lo que sigue siendo una respuesta válida.
BoltClock
@BoltClock Sí, tienes razón, leí mal la especificación y eliminé ese comentario porque estaba equivocado. Este selector solo coincidirá con el pque está precedido inmediatamente por h1.hc-reform(con el mismo elemento padre, por supuesto).
Josh Stodola
44
wow no sabía sobre el selector de hermanos adyacentes. ¡Genial gracias!
teorizar
1
~ es un mejor selector en este caso. Aquí un trabajo jsFiddle jsfiddle.net/dZAtt
ProblemsOfSumit
Vale la pena señalar que esto no funciona si el primer elemento tiene hijos
72GM
60

Puede usar el selector de hermanos ~ :

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

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

Stephan Muller
fuente
Los errores de IE en el primer enlace son oscuros, lo que probablemente sea la razón por la cual quirksmode los pasa por alto.
Hacha.
14

no >es un selector hijo.

el que quieres es +

así que intenta h1.hc-reform + p

la compatibilidad con el navegador no es excelente

Moin Zaman
fuente
2020: el soporte del navegador es excelente después de diez años. Solo una información para los principiantes de CSS.
AlexioVay
8

El >es un selector hijo . Entonces, si su HTML se ve así:

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

... entonces ese es tu boleto.

Pero si su 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;
}
Richard JP Le Guen
fuente
44
Espero que no haya anidado p's dentro de h1's. Además, adyacente solo selecciona la primera p.
Stephan Muller
2

No exactamente. El h1.hc-reform > psignifica "cualquier pexactamente un nivel debajo h1.hc-reform".

Lo que queremos es h1.hc-reform + p. Por supuesto, eso podría causar algunos problemas en versiones anteriores de Internet Explorer; si desea hacer que la página sea compatible con IEs anteriores, no podrá agregar una clase manualmente a los párrafos o usar 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/

Justin Russell
fuente