¿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.

— Tony Noriega
fuente

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