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

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

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

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