Mit welchem ​​CSS-Selektor kann das erste Div innerhalb eines anderen Div ausgewählt werden?

95

Ich habe so etwas wie:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Was ist der CSS-Selektor für das zweite Div (1. Div innerhalb des "Content" -Div), sodass ich die Schriftfarbe des Datums innerhalb dieses Div einstellen kann?

css css-selectors GregH
quelle
1
Bitte akzeptiere die am besten gewählte Antwort, sie ist definitiv richtig.
Barry Michael Doyle

Antworten:

223

Die RICHTIGSTE Antwort auf Ihre Frage lautet ...

#content > div:first-of-type { /* css */ }

Dadurch wird das CSS auf das erste div angewendet, das ein direktes untergeordnetes Element von #content ist (das möglicherweise das erste untergeordnete Element von #content ist oder nicht).

Andere Option:

#content > div:nth-of-type(1) { /* css */ }
Jeremy Moritz
quelle
6
Stimmen Sie zu, dass dies die EINZIGE richtige Antwort auf die Frage ist und akzeptiert werden sollte.
Ilya Streltsyn
Kannst du mir sagen, wie ich alle Div exceptFirst / Last Div auswählen soll ?
Tân
4
@ HappyCoding#content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân, wenn Sie alle Divs außer dem ersten UND dem letzten wollen, wäre es ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz
20

Sie wollen

#content div:first-child {
/*css*/
}
Capt Otis
quelle
3
Funktioniert nicht, weil <div>es nicht das erste Kind ist <h1>.
Josh Leitzel
Ganz zu schweigen davon, dass es im IE überhaupt nicht funktioniert, selbst wenn das Datum divdas erste Kind wäre.
Valentin Flachsel
1
"Ja wirklich?" W3 sagt, dass dies der Fall sein wird, solange ein Doctype angegeben ist. (Ich weiß es ehrlich gesagt nicht.)
Josh Leitzel
3
Ich habe gerade einen Test ausgeführt, der tatsächlich funktioniert, wenn doctype angegeben ist. Zu meiner Verteidigung wäre ich nicht überrascht, wenn Dinge im IE funktionieren würden, wenn Sie <the_cake_is_a_lie> oben in die Datei
eingeben würden
1
Ich teste immer, bevor ich eine Antwort poste. Und der Kuchen ist eine Lüge.
Capt Otis
16

Wenn wir davon ausgehen können, dass der H1 immer da sein wird, dann

div h1+div {...}

Aber haben Sie keine Angst, die ID des Inhalts div anzugeben:

#content h1+div {...}

Das ist ungefähr so ​​gut, wie Sie es jetzt können, wenn Sie auf eine JavaScript-Bibliothek wie jQuery zurückgreifen. Die Verwendung von h1 + div stellt sicher, dass nur das erste div nach dem H1 den Stil erhält. Es gibt Alternativen, die jedoch auf CSS3-Selektoren basieren und daher bei den meisten IE-Installationen nicht funktionieren.

Stan Rogers
quelle
+1. Ich habe nicht einmal darüber nachgedacht. Beachten Sie, dass diese Lösung in IE6 nicht funktioniert.
Josh Leitzel
6

Das, was Sie am nächsten suchen, ist : Pseudoklasse für das erste Kind ; Leider funktioniert dies in Ihrem Fall nicht, da Sie eine <h1>vor dem haben <div>s. Was ich vorschlagen würde, ist, dass Sie entweder eine Klasse hinzufügen <div>, mögen <div class="first">und dann so formatieren, oder jQuery verwenden, wenn Sie wirklich keine Klasse hinzufügen können:

$('#content > div:first')

Josh Leitzel
quelle
1
Rechtschreibfehler - sollte sein$('#content > div.first)
Mateusz Odelga