Seleccione el primer elemento que aparece después de otro elemento

113

Tengo el siguiente código HTML en una página:

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

En mi .csstengo el siguiente selector para diseñar el h4elemento. El código HTML anterior es solo una pequeña parte de todo el código; hay varios divs más envueltos en pertenecer a un shadowbox:

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

Entonces, tengo el estilo correcto para mi h4elemento, pero también quiero diseñar la petiqueta en mi HTML.

¿Es esto posible con selectores CSS? Y si es así, ¿cómo puedo hacer esto?

html css css-selectors

— Robar
fuente

199

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

Esto se llama selector de hermanos adyacentes .

— Phrogz
fuente

1

Una alternativa es usar JS para encontrar sus h4elementos, caminar hasta el siguiente hermano y agregarle una clase CSS. Con jQuery, esto simplemente sería$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Tenga en cuenta que esto solo funciona en 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 después de h4 después de un elemento .original. Muy útil

— user1610743

30

Para su ejemplo literal, querrá usar 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 quisiera seleccionar todos los párrafos sucesivos, necesitaría 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>

Desafortunadamente, se sabe que tiene errores en IE 7+ .

— Joel Mellon
fuente

16

Simplemente haga clic en esto cuando trate de resolver este tipo de cosas por mí mismo.

Hice un selector que se ocupa del elemento después de ser algo diferente a una p.

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

Espero que esto ayude a cualquiera que lo encuentre :)

— Tom
fuente

9

El uso de *coincide con cualquier elemento como se describe en el título. Fue un recordatorio útil para mí.

— James EJ

1

Esta es la única respuesta que se ajusta a la pregunta. Otras respuestas requieren conocimientos previos sobre el tipo de elemento precedente.

— Hugo Wijdeveld

0

Simplemente para los principiantes:

Si desea seleccionar un elemento inmediatamente después de otro elemento, utilice el +selector.

Por ejemplo:

div + pEl elemento "+" selecciona todos los <p>elementos que se colocan inmediatamente después de los <div>elementos

Si desea obtener más información sobre los selectores, utilice esta tabla

— Trooller
fuente

0

Utilizo la última versión de CSS y "+" no me funcionó, así que termino con

:primer hijo

— VNicholson
fuente