Wählen Sie das erste vorkommende Element nach einem anderen Element aus

113

Ich habe den folgenden HTML-Code auf einer Seite:

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

In meinem .csshabe ich den folgenden Selektor, um das h4Element zu formatieren. Der obige HTML-Code ist nur ein kleiner Teil des gesamten Codes. Es gibt mehrere divweitere, die zu einer Schattenbox gehören:

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

Ich habe also den richtigen Stil für mein h4Element, möchte aber auch das pTag in meinem HTML-Code formatieren.

Ist das mit CSS-Selektoren möglich? Und wenn ja, wie kann ich das machen?

html css css-selectors rauben
quelle

Antworten:

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

Dies wird als benachbarter Geschwister-Selektor bezeichnet .

Phrogz
quelle
1
Eine Alternative besteht darin, JS zu verwenden, um Ihre h4Elemente zu finden , zum nächsten Geschwister zu gehen und dem eine CSS-Klasse hinzuzufügen. Mit jQuery wäre dies einfach$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');
Phrogz
2
Beachten Sie, dass dies nur bei Elementen funktioniert, die SOFORT auf das erste folgen. Wenn Sie das zweitnächste HTML-Element haben möchten, können Sie es wie folgt verketten: #selector .original + h4 + p, um das p nach einem h4 nach einem .original-Element zu erhalten. Sehr nützlich
user1610743
30

Für Ihr wörtliches Beispiel möchten Sie den benachbarten Selektor (+) verwenden.

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>

Wenn Sie jedoch alle aufeinander folgenden Absätze auswählen möchten, müssen Sie den allgemeinen Geschwister-Selektor (~) verwenden.

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>

Es ist bekannt, dass es in IE 7+ leider fehlerhaft ist .

Joel Mellon
quelle
16

Schlagen Sie einfach darauf, wenn Sie versuchen, diese Art von Dingen selbst zu lösen.

Ich habe einen Selektor erstellt, der sich mit dem Element befasst, nachdem er etwas anderes als ein p war.

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

Hoffe das hilft jedem der es findet :)

Tom
quelle
9
Verwenden Sie die *Übereinstimmungen mit jedem Element, wie im Titel beschrieben. War eine hilfreiche Erinnerung für mich.
James EJ
1
Dies ist die einzige Antwort, die zur Frage passt. Andere Antworten erfordern Vorkenntnisse über die Art des vorhergehenden Elements.
Hugo Wijdeveld
0

Einfach für die Anfänger:

Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen möchten, verwenden Sie den +Selektor.

Beispielsweise:

div + pDas Element "+" wählt alle <p>Elemente aus, die unmittelbar nach den <div>Elementen platziert werden

Wenn Sie mehr über Selektoren erfahren möchten, verwenden Sie diese Tabelle

Trooller
quelle
0

Ich verwende das neueste CSS und "+" hat bei mir nicht funktioniert, so dass ich am Ende mit

:erstes Kind

VNicholson
quelle