Was ist die Syntax für den Selektor in CSS für das nächste Element?

200

Wenn ich ein Header-Tag habe <h1 class="hc-reform">title</h1>

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

und danach habe ich einen Absatz <p>stuff here</p>.

Wie kann ich mithilfe von CSS sicherstellen, dass jedes <p>Tag, das dem folgenden folgt h1.hc-reform, verwendet wird:clear:both;

wäre das:

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

Aus irgendeinem Grund funktioniert das nicht.

html css css-selectors siblings Tony Noriega
quelle

Antworten:

397

Dies wird als benachbarter Geschwister- Selektor bezeichnet und durch ein Pluszeichen dargestellt ...

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

Hinweis: Dies wird in IE6 oder älter nicht unterstützt.

Josh Stodola
quelle
4
Das würde nur das auswählen p, was gleich danach kommt h1.hc-reform. Andererseits ist es möglicherweise das einzige, clear: bothauf das angewendet werden muss, damit es funktioniert, da es einfach den h1Float löscht , sodass es immer noch eine gültige Antwort ist.
BoltClock
@BoltClock Ja, Sie haben Recht, ich habe die Spezifikation falsch gelesen und diesen Kommentar gelöscht, weil er falsch war. Dieser Selektor stimmt nur mit dem überein, dem punmittelbar vorausgegangen ist h1.hc-reform(natürlich mit demselben übergeordneten Element).
Josh Stodola
4
wow wusste nichts über den angrenzenden Geschwister-Selektor. Nett, danke!
Theorie
1
~ ist in diesem Fall ein besserer Selektor. Hier eine funktionierende JSfiddle jsfiddle.net/dZAtt
ProblemsOfSumit
Es ist erwähnenswert, dass dies nicht funktioniert, wenn das erste Element Kinder hat
72GM
60

Sie können den Geschwister-Selektor verwenden ~ :

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

Dadurch werden alle nachfolgenden pElemente ausgewählt .hc-reform, nicht nur das erste.

Stephan Müller
quelle
Die IE-Fehler im ersten Link sind obskure Randfälle, weshalb sie wahrscheinlich im quirksmode übersehen werden.
Axt.
14

nein >ist ein Kinderselektor.

das, was du willst, ist +

also versuche h1.hc-reform + p

Browser-Unterstützung ist nicht großartig

Moin Zaman
quelle
2020: Die Browserunterstützung ist nach zehn Jahren großartig. Nur eine Info für CSS-Neulinge.
AlexioVay
8

Das >ist eine untergeordnete Auswahl . Wenn Ihr HTML also so aussieht:

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

... dann ist das dein Ticket.

Aber wenn Ihr HTML so aussieht:

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

Dann möchten Sie den angrenzenden Selektor :

h1.hc-reform + p{
     clear:both;
}
Richard JP Le Guen
quelle
4
Ich hoffe wirklich, dass er p's nicht in h1's verschachtelt hat. Außerdem wählt nebenan nur das erste p aus.
Stephan Müller
2

Nicht genau. Die h1.hc-reform > pMittel „jede pgenau ein Niveau unterhalb h1.hc-reform“.

Was du willst ist h1.hc-reform + p. Dies kann natürlich in älteren Versionen von Internet Explorer zu Problemen führen. Wenn Sie die Seite mit älteren IEs kompatibel machen möchten, müssen Sie entweder manuell eine Klasse zu den Absätzen hinzufügen oder JavaScript verwenden (in jQuery können Sie beispielsweise so etwas tun $('h1.hc-reform').next('p').addClass('first-paragraph')).

Weitere Informationen: http://www.w3.org/TR/CSS2/selector.html oder http://css-tricks.com/child-and-sibling-selectors/

Justin Russell
quelle