Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

CSS-Selektoren kombinieren

Quizfrage: Was ist der Unterschied zwischen diesen beiden Schreibweisen?

ul li {font-size:20px;}
ul > li {font-size:20px;}

In beiden Fällen geht es um Elemente in einer ungeordneten Liste (ul). Im ersten Beispiel werden alle Listenelemente angesprochen, im zweiten Fall nur die Listenelemente der obersten Ebene.
TLDR: Am Ende des Artikels gibt es ein CodePen mit Beispielen.

1. Descendant selector

ul li {font-size:20px;}

Das Listenelement ist ein descendant der ungeordneten Liste (ul). Descendant kann man mit „Nachfahre“ übersetzen.
Diese Kombination legt fest, dass alle Listenelemente in der Liste eine Schriftgröße von 20 Pixeln haben sollen. Egal wie viele Listenelemente es gibt und an welcher Stelle sie stehen. Diese Anweisung greift auch bei mehreren ineinander verschachtelten Listen. Alle Listenelemente sind immer 20 Pixel groß.

2. Child selector

ul > li {font-size:20px;}

Bei dieser Schreibweise ist das Listenelement ein child der ungeordneten Liste (ul), also ein Kind der Liste. Das bedeutet, dass nur die Kinder, also die direkten Nachkommen der ungeordneten Liste, 20 Pixel groß sind.
Wird in die Liste eine weitere Liste hineingeschachtelt, werden diese Elemente nicht angesprochen.

3. Adjacent sibling selector

h4 + p {font-weight:bold;}

Hier ist das Paragraph-Element (p) ein adjacent sibling der Überschrift (h4) – Überschrift und Absatz sind also Geschwister.
Mit dieser Kombination sprechen wir ein ganz bestimmtes Element an – nämlich das, was unmittelbar auf das vorhergehende Element folgt.
Im Beispiel oben wäre der erste Absatz (p) fett, der auf eine Überschrift h4 folgt. Der nächste Absatz wird nicht angesprochen (s. CodePen).

4. General sibling selector

h4 ~ p {font-weight:bold;}

Werden die Selektoren mit einem Tilde-Zeichen verbunden, ist das Paragraph-Element (p) ein general sibling der Überschrift (h4). Es werden alle p-Elemente angesprochen, die auf die auf die Überschrift h4 folgen. Voraussetzung ist, sie haben ein gemeinsames Elternelement, z.B. ein umschliessendes div.

Alle Beispiele als CodePen