Seleziona il primo elemento che si verifica dopo un altro elemento

113

Ho il seguente codice HTML su una pagina:

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

Nel mio .cssho il seguente selettore per modellare l' h4elemento. Il codice HTML sopra è solo una piccola parte dell'intero codice; ce ne sono molti divaltri intorno all'appartenenza a una shadowbox:

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

Quindi, ho lo stile corretto per il mio h4elemento, ma voglio anche applicare uno stile al ptag nel mio HTML.

È possibile con i selettori CSS? E se sì, come posso farlo?

html css css-selectors

— rapinare
fonte

199

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

Questo è chiamato selettore di pari livello adiacente .

— Phrogz
fonte

1

Un'alternativa è usare JS per trovare i tuoi h4elementi, andare al prossimo fratello e aggiungere una classe CSS a quello. Con jQuery, questo sarebbe semplicemente$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Nota che questo funziona solo sugli elementi che seguono il primo IMMEDIATAMENTE. Se vuoi avere il secondo elemento html successivo, puoi concatenarlo in questo modo: #selector .original + h4 + p per ottenere la p che segue un h4 che segue un elemento .original. Molto utile

— user1610743

30

Per il tuo esempio letterale dovresti usare il selettore adiacente (+).

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>

Tuttavia, se si desidera selezionare tutti i paragrafi successivi, è necessario utilizzare il selettore di pari livello generale (~).

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>

Sfortunatamente è noto per essere difettoso in IE 7+ .

— Joel Mellon
fonte

16

Provaci quando provo a risolvere questo tipo di cose da solo.

Ho fatto un selettore che si occupa dell'elemento dopo essere stato qualcosa di diverso da un p.

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

Spero che questo aiuti chiunque lo trovi :)

— Tom
fonte

9

Usando le *corrispondenze qualsiasi elemento come descritto nel titolo. È stato un utile promemoria per me.

— James EJ

1

Questa è l'unica risposta che si adatta alla domanda. Altre risposte richiedono una conoscenza preliminare sul tipo di elemento precedente.

— Hugo Wijdeveld

0

Semplicemente per i principianti:

Se vuoi selezionare un elemento subito dopo un altro, usa il +selettore.

Per esempio:

div + pL'elemento "+" seleziona tutti gli <p>elementi che vengono inseriti immediatamente dopo gli <div>elementi

Se vuoi saperne di più sui selettori usa questa tabella

— Trooller
fonte

0

Uso i CSS più recenti e "+" non ha funzionato per me, quindi finisco con

:Primogenito

— VNicholson
fonte