¿Qué es la sintaxis para el selector en CSS para el siguiente elemento?

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 tengo un párrafo <p>stuff here</p>.

¿Cómo puedo asegurar usando CSS que cada etiqueta <p> que sigue a h1.hc-reform a usar: clear:both;

Sería:

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

Por alguna razón eso no está funcionando.

Author: Ramratan Gupta, 2010-09-07
Source

5 answers

Esto se llama el selector hermano adyacente, y está representado por un signo más...

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

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

 347
Author: Josh Stodola,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-07 15:24:40

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.

 52
Author: Stephan Muller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-01 20:45:49

No > es un selector hijo.

El que quieres es +

Así que intenta h1.hc-reform + p

El soporte del navegador no es genial

 11
Author: Moin Zaman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-07 15:25:28

El > es un selector hijo . Así que 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;
}
 8
Author: Richard JP Le Guen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-07 15:26:12

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

Lo que quieres 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, deberá 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 /

 1
Author: Justin Russell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-07 15:32:15