Qual è la sintassi per il selettore in CSS per l'elemento successivo?

200

Se ho un tag di intestazione <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

e dopo ho un paragrafo <p>stuff here</p>.

Come posso assicurarmi di usare CSS che ogni <p>tag che segue il h1.hc-reformda usare:clear:both;

sarebbe quello:

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

per qualche motivo che non funziona.

— tony noriega
fonte

397

Questo si chiama selettore fratello adiacente ed è rappresentato da un segno più ...

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

Nota: questo non è supportato in IE6 o precedenti.

— Josh Stodola
fonte

4

Questo selezionerebbe solo quello pche viene subito dopo h1.hc-reform. Inoltre, potrebbe essere l'unico su cui è clear: bothnecessario applicarlo affinché funzioni, poiché cancella semplicemente il h1float, quindi è ancora una risposta valida.

— BoltClock

@BoltClock Sì, hai ragione, ho letto male le specifiche e ho eliminato quel commento perché era sbagliato. Questo selettore corrisponderà solo a pquello immediatamente preceduto da h1.hc-reform(con lo stesso elemento genitore, ovviamente).

— Josh Stodola,

4

wow non sapeva del selettore di fratelli adiacenti. Bene grazie!

— teorizza il

1

~ è un selettore migliore in questo caso. Qui un gruppo di lavoro JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

vale la pena notare che questo non funziona se il primo elemento ha figli

— 72GM

60

È possibile utilizzare il selettore di pari livello ~ :

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

Questo seleziona tutti gli pelementi che seguono .hc-reform, non solo il primo.

— Stephan Muller
fonte

I bug di IE nel primo link sono oscuri casi di casi limite, motivo per cui quirksmode li trascura.

— Ascia.

14

no >è un selettore figlio.

quello che vuoi è +

allora prova h1.hc-reform + p

il supporto del browser non è eccezionale

— Moin Zaman
fonte

2020: il supporto del browser è eccezionale dopo dieci anni. Solo informazioni per i principianti CSS.

— AlexioVay

8

Il >è un selettore di bambino . Quindi se il tuo HTML appare così:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... allora quello è il tuo biglietto.

Ma se il tuo HTML appare così:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Quindi vuoi il selettore adiacente :

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

— Richard JP Le Guen
fonte

4

Spero proprio che non abbia nidificato p all'interno di h1. Inoltre, adiacente seleziona solo il primo p.

— Stephan Muller,

2

Non esattamente. Il h1.hc-reform > pmezzo "qualsiasi pesattamente sotto un livelloh1.hc-reform ".

Quello che vuoi è h1.hc-reform + p. Naturalmente, ciò potrebbe causare alcuni problemi nelle versioni precedenti di Internet Explorer; se vuoi rendere la pagina compatibile con IE più vecchi, rimarrai bloccato con l'aggiunta manuale di una classe ai paragrafi o l'utilizzo di JavaScript (ad esempio in jQuery, potresti fare qualcosa di simile $('h1.hc-reform').next('p').addClass('first-paragraph')).

Maggiori informazioni: http://www.w3.org/TR/CSS2/selector.html o http://css-tricks.com/child-and-sibling-selectors/

— Justin Russell
fonte