Gibt es einen CSS-Selektor nur für das erste direkte Kind?

314

Ich habe das folgende HTML

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

Und der folgende Stil:

DIV.section DIV:first-child 
{
  ...
}

Aus irgendeinem Grund, den ich nicht verstehe, wird der Stil sowohl auf den "Unterinhalt 1" <div> als auch auf den "Header" angewendet <div>.

Ich dachte, dass der Selektor für den Stil nur für das erste direkte Kind eines Div mit einer Klasse namens "section" gelten würde. Wie kann ich den Selektor ändern, um das zu bekommen, was ich will?

html css css-selectors Jeremy
quelle
3
jsfiddle.net/joelpurra/7t5CK
Joel Purra

Antworten:

518

Was Sie wörtlich gepostet haben, bedeutet "Finden Sie alle Divs, die sich innerhalb von Section Divs befinden und das erste Kind ihres Elternteils sind." Das Sub enthält ein Tag, das dieser Beschreibung entspricht.

Es ist mir unklar, ob Sie beide Kinder der Hauptdiv wollen oder nicht. Wenn ja, verwenden Sie Folgendes:

div.section > div

Wenn Sie nur den Header möchten, verwenden Sie Folgendes:

div.section > div:first-child

Mit den >Änderungen ändert sich die Beschreibung in: "Finde alle Divs, die die direkten Nachkommen von Section Divs sind", was du willst.

Bitte beachten Sie, dass alle gängigen Browser außer IE6 diese Methode unterstützen. Wenn die IE6-Unterstützung geschäftskritisch ist, müssen Sie den untergeordneten Divs Klassen hinzufügen und diese stattdessen verwenden. Ansonsten lohnt es sich nicht, sich darum zu kümmern.

Matchu
quelle
8
: Das erste Kind ist in diesem Fall nicht erforderlich.
eozzy
3
Es scheint, dass das OP nicht so sehr nach dem Selektor fragt, sondern warum die Regel auf alle untergeordneten Divs angewendet wird.
Doug Neiner
Meine Interpretation ist, dass er das Konzept der CSS-Vererbung erhält und dachte, das erste Kind hätte den Effekt, der> hat. Der Wortlaut ist ziemlich unklar.
Matchu
3
Ah, die Freude, alt genug zu sein, um sich daran zu erinnern, wann der Selektor "direkter Nachkomme" all Ihre Probleme lösen würde, aber Sie konnten ihn nicht verwenden, weil er im IE nicht funktionierte . Dann würde sich viel unnötiger Frust ergeben.
Aroth
Dies gilt auch für das erste Kind des ersten Kindes. Wenn die Änderungen wirklich nur auf das erste Kind angewendet werden müssen, müssen wir die Änderungen auf die Kinder des Kindes stornieren. So etwas in der Art:div.section > div:first-child > div { /* Cancel Changes*/}
Mahdi J.Ansari
51

Diese Frage wurde bei Google gesucht. Dies gibt das erste untergeordnete Element eines Elements mit Klasse zurück container, unabhängig davon, um welchen Typ es sich handelt.

.container > *:first-child
{
}
Tom Gullen
quelle
44

CSS wird als Cascading Style Sheets bezeichnet, da die Regeln vererbt werden. Unter Verwendung der folgenden Selektor, wird wählen Sie einfach die direkte Kind der Eltern, aber seine Regeln werden geerbt durch das div‚s Kinder divs:

div.section > div { color: red }

Nun werden sowohl das div als auch seine Kinder sein red. Sie müssen alles aufheben, was Sie für das übergeordnete Element festgelegt haben, wenn Sie nicht möchten, dass es erbt:

div.section > div { color: red }
div.section > div div { color: black }

Jetzt wird nur die Single div, von der ein direktes Kind div.sectionist, rot sein, aber ihre Kinder divswerden immer noch schwarz sein.

Doug Neiner
quelle
6 
div.section > div
eozzy
quelle
6

Verwenden Sie div.section > div.

Besser noch, verwenden Sie ein <h1>Tag für die Überschrift und div.section h1in Ihrem CSS, um ältere Browser (die nichts über das wissen >) zu unterstützen und Ihre Markup-Semantik beizubehalten.

ЯegDwight
quelle
Gute Idee, leider muss ich auch IE6 unterstützen, und wenn ich h1 verwende, muss ich die Schriftgröße so einstellen, dass sie erbt, damit die Schriftart mit der des Körpers übereinstimmt, und dh7 und darunter unterstützen keine Vererbung. arg!
Jeremy
Außerdem habe ich untergeordnete Divs und das Einfügen von untergeordneten Divs in ein h1 verstößt gegen die Regeln, obwohl der IE es rendert, bin ich mir nicht sicher, was andere Browser tun
Jeremy
3

Der CSS-Selektor für das direkte erste Kind in Ihrem Fall lautet:

.section > :first-child

Der direkte Selektor ist> und der erste untergeordnete Selektor ist: erstes Kind

Kein Sternchen vor dem: wie andere vorschlagen. Sie können die DOM-Suche beschleunigen, indem Sie diese Lösung ändern, indem Sie das Tag voranstellen:

div.section > :first-child
Matt Parkins
quelle