css: ul li:nth-child(2)

[Pit]

Hallo,

Frage: Bezieht sich die Regel ul li:nth-child(2) immer genau auf das 2 Kind, egal ob es sichtbar ist oder nicht? Oder wird das 3. Kind zum 2. Kind, wenn das 1. oder 2. Kind hidden ist?

Pit

[J o]

Morgen,

Frage: Bezieht sich die Regel ul li:nth-child(2) immer genau auf das 2 Kind, egal ob es sichtbar ist oder nicht? Oder wird das 3. Kind zum 2. Kind, wenn das 1. oder 2. Kind hidden ist?

Das bezieht sich immer auf das 2 Element wenn es ein li ist, Sichtbarkeit spielt da keine Rolle.

Gruß
Jo

[beatovich]

Frage: Bezieht sich die Regel ul li:nth-child(2) immer genau auf das 2 Kind, egal ob es sichtbar ist oder nicht? Oder wird das 3. Kind zum 2. Kind, wenn das 1. oder 2. Kind hidden ist?

CSS-Selektoren sind Abfragen über den DOM-Baum, welcher in seiner Struktur mittels CSS nicht verändert werden kann.

[Rolf B]

Hallo Pit,

merkwürdigerweise sagt die Spec NICHT, dass ein <ul> nur <li> Elemente enthalten darf. Statt dessen steht da "flow content", und das ist eine ganze Menge.

Wenn Du also den zweiten Listenpunkt ansprechen willst, solltest Du besser li:nth-of-type(2) verwenden und nicht nth-child. Die Aussage von Jo zur Sichtbarkeit gilt da auch.

Rolf

[J o]

Hey,

Wenn Du also den zweiten Listenpunkt ansprechen willst, solltest Du besser li:nth-of-type(2) verwenden und nicht nth-child. Die Aussage von Jo zur Sichtbarkeit gilt da auch.

Auch bei :nth-child wird der Typ geprüft. Falls das 2te Element kein li ist, trifft der Selektor nicht zu. Nachtrag: dazu noch ein kleiner Test

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Auch bei :nth-child wird der Typ geprüft.

Bei :nth-child(2) nicht; bei li:nth-child(2) ja.

Falls das 2te Element kein li ist, trifft der Selektor nicht zu.

Und falls das erste Element kein li ist, selektiert li:nth-child(2) das erste Listenelement (falls das zweite Element ein li ist).

LLAP 🖖

[J o]

Hey,

Und falls das erste Element kein li ist, selektiert li:nth-child(2) das erste Listenelement (falls das zweite Element ein li ist).

Nein, das erste Listenelement ist in dem Fall immernoch das 2te Kind ( li:nth-Child(2) ). Normalerweise bist doch du derjenige, der auf solche Feinheiten Wert legt.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Und falls das erste Element kein li ist, selektiert li:nth-child(2) das erste Listenelement (falls das zweite Element ein li ist).

Nein, das erste Listenelement ist in dem Fall immernoch das 2te Kind ( li:nth-Child(2) ).

Ich sagte nichts Gegenteiliges.

LLAP 🖖

[Orlok]

Hallo Rolf

merkwürdigerweise sagt die Spec NICHT, dass ein <ul> nur <li> Elemente enthalten darf.

Stimmt, ul darf nicht nur li-Elemente enthalten.

Statt dessen steht da "flow content", und das ist eine ganze Menge.

Wo liest du das?

Ich schaue beim ul-Element in die Zeile zum Thema Inhaltsmodell und lese:

„Zero or more li and script-supporting elements.“

Eine ul darf außer li nur script und template als Kinder haben.

Viele Grüße,

Orlok

[Rolf B]

Hallo Orlok,

ich war zu dumm, um "Category" und "Content-Model" zu unterscheiden.

Natürlich hast Du da recht. <ul> IST flow content, aber der Inhalt ist es nicht. Der Inhalt ist <li>, <script> und <template>, was für :nth-child natürlich immer noch ein Treffer sein kann.

Rolf

[Gunnar Bittersmann]

@@Rolf B

merkwürdigerweise sagt die Spec NICHT, dass ein <ul> nur <li> Elemente enthalten darf.

Was ist daran merkwürdig?

Statt dessen steht da "flow content"

Nein, da steht: “Zero or more li and script-supporting elements.” Sowohl in der WHATWG-Spec (die ich persönlich für irrelevant halte) als auch in der richtigen™.

LLAP 🖖

[Gunnar Bittersmann]

@@Pit

Frage: Bezieht sich die Regel ul li:nth-child(2) immer genau auf das 2 Kind, egal ob es sichtbar ist oder nicht?

Ja. Aber nicht egal, ob es vom Typ li ist oder nicht. Wenn du das zweite Listelement haben möchtest (und nicht das li-Element, welches das weite Kind von ul ist), dann ist ul li:nth-of-type(2) angebracht.

Oder wird das 3. Kind zum 2. Kind, wenn das 1. oder 2. Kind hidden ist?

Nein, wenn du das willst, brauchst du li:nth-child(2 of :not([hidden])) und Safari (gegenwärtig).

Guckst du: Zebra gone wrong • nth-child of • can I use • erledigt

LLAP 🖖

[beatovich]

hallo

Ja. Aber nicht egal, ob es vom Typ li ist oder nicht. Wenn du das zweite Listelement haben möchtest (und nicht das li-Element, welches das weite Kind von ul ist), dann ist ul li:nth-of-type(2) angebracht.

Kleine Korrektur

dann ist ul > li:nth-of-type(2) angebracht. Wer weiss, wie verschachtelt Listen werden können. Und Nebeneffekte will man in der Regel ausschliessen.

[Gunnar Bittersmann]

@@beatovich

Kleine Korrektur

dann ist ul > li:nth-of-type(2) angebracht. Wer weiss, wie verschachtelt Listen werden können. Und Nebeneffekte will man in der Regel ausschliessen.

Das hilft dir bei

ul
├─li
│ └─ul
│   ├─li
│   └─li
└─li
  └─ul
    ├─li
    └─li

aber auch nicht weiter.

Du willst der äußeren Liste eine ID foo oder Klasse bar vergeben und #foo > li:nth-of-type(2) bzw. .bar > li:nth-of-type(2) selektieren.

LLAP 🖖

[beatovich]

hallo

Du willst der äußeren Liste eine ID foo oder Klasse bar vergeben und #foo > li:nth-of-type(2) bzw. .bar > li:nth-of-type(2) selektieren.

Das ist natürlich noch korrekter.

[Pit]

Danke an alle für die Hinweise.

Pit