CSS come selezionare primo elemento che si verifica dopo un altro elemento

Ho il seguente codice HTML in una paginaCSS come selezionare primo elemento che si verifica dopo un altro elemento

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

Nel mio css ho il seguente selettore per lo stile l'elemento H4. Il codice HTML di cui sopra è solo una piccola parte di tutto il codice, ci sono diversi div di più avvolto intorno appartenenti ad uno shadowbox

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

Così ho lo stile corretto per il mio elemento H4, ma voglio anche per lo stile della tag di paragrafo nel mio HTML. Questo è possibile con i selettori CSS? E se sì, come posso fare questo?

fonte

2011-01-07 Rob

161

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

Questo è chiamato adjacent sibling selector.

fonte

2011-01-07 07:22:34 Phrogz

ma attenzione a alcuni bug di IE, vedere http://www.quirksmode.org/css/contents.html – Willem

Un'alternativa è usare JS per trovare gli elementi 'h4', andare al fratello successivo e aggiungere un CSS classe a quello. Con jQuery, questo sarebbe semplicemente '$ ('# sb-wrapper # sb-wrapper-inner # sb-body #myDiv h4'). Next(). AddClass ('shadowbox-h4-p');' – Phrogz

Si noti che questo funziona solo su elementi che seguono immediatamente il primo. Se vuoi avere il secondo elemento html successivo, puoi concatenarlo in questo modo: #selector .originale + h4 + p per ottenere il p che segue un h4 che segue un elemento .original. Molto utile – user1610743

Basta colpire su questo quando si cerca di 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 tutti coloro che lo trova :)

fonte

2012-06-07 09:35:12 Tom

Questo non aggiunge niente oltre la risposta accettata –

L'uso di '*' corrisponde a qualsiasi elemento come descritto nel titolo. È stato un utile promemoria per me. –

Per esempio letterale che ci si vuole utilizzare 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, avresti bisogno di utilizzare il selettore fratello 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>

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

fonte

2012-10-25 17:41:30

CSS come selezionare primo elemento che si verifica dopo un altro elemento

risposta

Problemi correlati