:first-child funktioniert nicht wie erwartet

Question

Ich versuche, das erste h1 innerhalb eines div mit einer Klasse namens detail_container auszuwählen. Es funktioniert, wenn h1 das erste Element innerhalb dieses div ist, aber wenn es nach diesem ul kommt, funktioniert es nicht.

.detail_container h1:first-child
{
color:blue;
} 

    Erstes H1
    Zweites H1

Ich war der Ansicht, dass der von mir verwendete CSS-Code das erste h1 unabhängig davon auswählt, wo es in diesem div ist. Wie kann ich es zum Laufen bringen?

Answer 1

Der h1:first-child Selektor bedeutet

Wählen Sie das erste Kind seines Elternelementes aus,
nur wenn es ein h1 Element ist.

Das :first-child des Containers hier ist das ul, und kann somit nicht h1:first-child erfüllen.

Für Ihren Fall gibt es CSS3's :first-of-type:

.detail_container h1:first-of-type
{
    color: blue;
} 

Aber mit Browserkompatibilitätsproblemen und dergleichen ist es besser, dem ersten h1 eine Klasse zu geben und dann diese Klasse zu wählen:

.detail_container h1.first
{
    color: blue;
}

Answer 2

:first-child wählt das erste h1 aus nur dann, wenn es das erste Kind seines Elternelements ist. In deinem Beispiel ist das ul das erste Kind des div.

Der Name der Pseudo-Klasse ist etwas irreführend, aber im Spezifikation wird es ziemlich klar erklärt hier.

Der :first Selektor von jQuery gibt dir, was du suchst. Du kannst dies tun:

$('.detail_container h1:first').css("color", "blue");

Answer 3

Du kannst auch verwenden

.detail_container h1:nth-of-type(1)

Indem du die Zahl 1 durch eine andere Zahl ersetzt, kannst du ein beliebiges anderes h1-Element auswählen.

Answer 4

Für diesen speziellen Fall können Sie Folgendes verwenden:

.detail_container > ul + h1{ 
    color: blue; 
}

Aber wenn Sie denselben Selektor in vielen Fällen benötigen, sollten Sie eine Klasse dafür haben, wie BoltClock sagte.

Answer 5

Sie könnten Ihre h1-Tags in ein anderes div einschließen und dann wäre das erste ein first-child. Dieses div braucht nicht einmal Styles. Es ist einfach eine Möglichkeit, diese Elemente zu trennen.

    Titel 1
    Titel 2