CSS cómo seleccionar primer elemento que ocurre después de otro elemento

Tengo el siguiente código HTML en una páginaCSS cómo seleccionar primer elemento que ocurre después de otro elemento

<h4>Some text</h4> 
<p> 
Some more text! 
</p>

En mi css Tengo el siguiente selector para estilizar el elemento H4. El código HTML anterior es sólo una pequeña parte de todo el código, hay varios divs más envueltas alrededor pertenecientes a un shadowbox

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 
{ 
    color    : #614E43; 
    margin-top   : 5px; 
    margin-left   : 6px; 
}

Así que tienen el estilo correcto para mi elemento H4, pero también quiero que el estilo de la etiqueta de párrafo en mi HTML. ¿Es esto posible con los selectores de CSS? Y si es así, ¿cómo puedo hacer esto?

Fuente

2011-01-07 Rob

161

#many .more.selectors h4 + p { ... }

Esto se llama adjacent sibling selector.

Fuente

2011-01-07 07:22:34 Phrogz

pero ten cuidado con algunos errores de IE, mira http://www.quirksmode.org/css/contents.html – Willem

Una alternativa es usar JS para encontrar tus elementos 'h4', caminar al siguiente hermano y agregar un CSS clase a eso. Con jQuery, esto sería simplemente '$ ('# sb-wrapper # sb-wrapper-inner # sb-body # myDiv h4'). Next(). AddClass ('shadowbox-h4-p');' – Phrogz

Tenga en cuenta que esto solo funciona en los elementos que siguen al primero INMEDIATAMENTE. Si desea tener el segundo elemento html siguiente, puede encadenarlo así: #selector .original + h4 + p para obtener la p que sigue a un h4 siguiendo un elemento original. Muy útil – user1610743

Solo pulse sobre esto cuando trate de resolver este tipo de cosas.

Hice un selector que trata con el elemento después de ser algo más que una p.

.here .is.the #selector h4 + * {...}

la esperanza que esto ayude a quien le resulta :)

Fuente

2012-06-07 09:35:12 Tom

Esto no agrega nada más allá de la respuesta aceptada –

Usando el '*' coincide con cualquier elemento como se describe en el título. Fue un recordatorio útil para mí. –

Para su ejemplo literal que te gustaría utilizar el selector adyacente (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4> 

<h4>Some text</h4> 
<p>I'm red</p> 
<p>I'm not</p>

Sin embargo, si desea seleccionar todos los párrafos sucesivos, deberá usar el selector general de hermanos (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4> 

<h4>Some text</h4> 
<p>I'm red</p> 
<p>I am too</p>

It's known to be buggy in IE 7+ unfortunately.

Fuente

2012-10-25 17:41:30

CSS cómo seleccionar primer elemento que ocurre después de otro elemento

Respuesta

Cuestiones relacionadas