The CSS Podcast – 002: Selectors
Wie können Sie Text so formatieren, dass er nur dann größer und rot ist, wenn es sich um den ersten Absatz eines Artikels handelt?
<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>
Sie verwenden einen CSS-Selektor, um dieses Element zu finden und eine CSS-Regel anzuwenden, z. B. so:
article p:first-of-type {
color: red;
font-size: 1.5em;
}
CSS bietet viele Optionen, um Elemente auszuwählen und Regeln auf sie anzuwenden. Diese Optionen reichen von sehr einfach bis sehr komplex und können bei der Lösung solcher Probleme helfen.
Bestandteile einer CSS-Regel
Um die Funktionsweise von Selektoren und ihre Rolle in CSS zu verstehen, ist es wichtig, die Bestandteile einer CSS-Regel zu kennen. Eine CSS-Regel ist ein Codeblock, der einen oder mehrere Selektoren und eine oder mehrere Deklarationen enthält.
In dieser CSS-Regel ist .my-css-rule
der Selektor, mit dem alle Elemente mit der Klasse my-css-rule
auf der Seite gefunden werden.
Innerhalb der geschweiften Klammern befinden sich drei Deklarationen.
Eine Deklaration ist ein Attribut- und Wertpaar, das Stile auf die Elemente anwendet, die mit den Selectoren übereinstimmen.
Eine CSS-Regel kann beliebig viele Deklarationen und Auswählen enthalten.
Einfache Selektoren
Die einfachste Gruppe von Selektoren richtet sich auf HTML-Elemente sowie Klassen, IDs und andere Attribute, die einem HTML-Tag hinzugefügt werden können.
Universalauswahl
Ein Universalselektor, auch als Platzhalter bezeichnet, passt zu jedem Element.
* {
color: hotpink;
}
Durch diese Regel hat jedes HTML-Element auf der Seite hotpinkfarbenen Text.
Typauswahl
Ein Typselektor stimmt direkt mit einem HTML-Element überein.
section {
padding: 2em;
}
Durch diese Regel hat jedes <section>
-Element auf allen Seiten 2em
von padding
.
Klassenauswahl
Ein HTML-Element kann ein oder mehrere Elemente im class
-Attribut haben.
Der Klassenauswahl entspricht jedes Element, auf das diese Klasse angewendet wurde.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
Alle Elemente, auf die die Klasse angewendet wird, werden rot eingefärbt:
.my-class {
color: red;
}
Beachten Sie, dass .
nur im CSS und nicht im HTML vorhanden ist.
Das liegt daran, dass das Zeichen .
die CSS-Sprache anweist, Mitglieder von Klassenattributen abzugleichen.
Dies ist ein gängiges Muster in CSS, bei dem ein Sonderzeichen oder eine Gruppe von Zeichen verwendet wird, um Selektortypen zu definieren.
Ein HTML-Element mit der Klasse .my-class
wird weiterhin mit der obigen CSS-Regel abgeglichen, auch wenn es mehrere andere Klassen hat, z. B.:
<div class="my-class another-class some-other-class"></div>
Das liegt daran, dass in CSS nach einem class
-Attribut gesucht wird, das die definierte Klasse enthält, anstatt genau mit dieser Klasse übereinzustimmen.
ID-Auswahl
Ein HTML-Element mit einem id
-Attribut sollte das einzige Element auf einer Seite mit diesem ID-Wert sein.
So wählen Sie Elemente mit einem ID-Selektor aus:
#rad {
border: 1px solid blue;
}
Mit diesem CSS-Code wird dem HTML-Element mit der id
rad
ein blauer Rahmen zugewiesen:
<div id="rad"></div>
Ähnlich wie beim Klassenselektor .
können Sie mit dem Zeichen #
CSS anweisen, nach einem Element zu suchen, das mit dem nachfolgenden id
übereinstimmt.
Attributauswahl
Mit dem Attribut-Selektor können Sie nach Elementen suchen, die ein bestimmtes HTML-Attribut haben oder einen bestimmten Wert für ein HTML-Attribut haben.
Legen Sie fest, dass CSS nach Attributen suchen soll, indem Sie den Selektor in eckige Klammern ([ ]
) setzen.
[data-type='primary'] {
color: red;
}
Dieses CSS sucht nach allen Elementen mit dem Attribut data-type
und dem Wert primary
:
<div data-type="primary"></div>
Anstatt nach einem bestimmten Wert von data-type
zu suchen, können Sie auch nach Elementen mit dem Attribut suchen, unabhängig von dessen Wert.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Der Text in beiden <div>
-Elementen ist rot.
Sie können attributbezogene Selektoren verwenden, die zwischen Groß- und Kleinschreibung unterscheiden, indem Sie dem Attributselektor den Operator s
hinzufügen.
[data-type='primary' s] {
color: red;
}
Wenn ein HTML-Element also eine data-type
von Primary
anstelle von primary
hat, wird der Text nicht rot dargestellt.
Mit einem i
-Operator können Sie das Gegenteil erreichen, also die Groß- und Kleinschreibung ignorieren.
Neben Fallsensitiven Operatoren haben Sie Zugriff auf Operatoren, die mit Teilen von Strings in Attributwerten übereinstimmen.
/* A href that contains "example.com" */
[href*='example.com'] {
color: red;
}
/* A href that starts with https */
[href^='https'] {
color: green;
}
/* A href that ends with .com */
[href$='.com'] {
color: blue;
}
Gruppierungsauswahlen
Ein Selektor muss nicht nur mit einem einzelnen Element übereinstimmen. Sie können mehrere Auswahlkriterien gruppieren, indem Sie sie durch Kommas trennen:
strong,
em,
.my-class,
[lang] {
color: red;
}
In diesem Beispiel wird die Farbänderung sowohl auf <strong>
- als auch auf <em>
-Elemente angewendet.
Außerdem wird es auf eine Klasse namens .my-class
und ein Element mit dem Attribut lang
angewendet.
Wissen testen
Ihr Wissen über einfache Auswahlen testen
* {}
Welche Art von einfacher Auswahl wird im obigen Snippet verwendet?
div {}
Welche Art von einfacher Auswahl wird im obigen Snippet verwendet?
Pseudoklassen und Pseudoelemente
CSS bietet nützliche Selektortypen, die sich auf einen bestimmten Plattformstatus konzentrieren, z. B. wenn der Mauszeiger auf einem Element ruht, auf Strukturen innerhalb eines Elements oder auf Teile eines Elements.
Pseudoklassen
HTML-Elemente können sich in verschiedenen Status befinden, entweder weil mit ihnen interagiert wird oder weil eines ihrer untergeordneten Elemente sich in einem bestimmten Status befindet.
Ein Nutzer könnte beispielsweise den Mauszeiger auf ein HTML-Element bewegen oder auf ein untergeordnetes Element.
Verwenden Sie in diesen Fällen die Pseudoklasse :hover
.
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}
/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}
Weitere Informationen finden Sie im Modul zu Pseudoklassen.
Pseudoelement
Pseudoelemente unterscheiden sich von Pseudoklassen, da sie nicht auf den Plattformstatus reagieren, sondern so tun, als würden sie ein neues Element mit CSS einfügen.
Pseudoelemente unterscheiden sich auch syntaktisch von Pseudoklassen, da anstelle eines einfachen Doppelpunkts (:
) ein doppelter Doppelpunkt (::
) verwendet wird.
.my-element::before {
content: 'Prefix - ';
}
Wie in der Demo oben, in der Sie dem Label eines Links den Dateityp vorangestellt haben, können Sie mit dem Pseudo-Element ::before
Inhalte am Anfang eines Elements oder mit dem Pseudo-Element ::after
Inhalte am Ende eines Elements einfügen.
Pseudo-Elemente sind jedoch nicht nur zum Einfügen von Inhalten geeignet.
Sie können sie auch verwenden, um Anzeigen auf bestimmte Teile eines Elements auszurichten.
Angenommen, Sie haben eine Liste.
Mit ::marker
können Sie den Stil für jeden Aufzählungspunkt (oder jede Zahl) in der Liste festlegen.
/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}
Mit ::selection
können Sie auch den Stil von Inhalten festlegen, die von einem Nutzer hervorgehoben wurden.
::selection {
background: black;
color: white;
}
Weitere Informationen finden Sie im Modul zu Pseudoelementen.
Wissen testen
Ihr Wissen zu Pseudo-Selektoren testen
Wie viele Doppelpunkte werden in Pseudo-Element-Selektoren verwendet?
p:hover { background: white; color: black; }
Welche Art von Pseudoauswahl wird im obigen Snippet verwendet?
Komplexe Auswahl
Sie haben bereits eine große Auswahl an Auswahlmethoden kennengelernt. Manchmal benötigen Sie jedoch eine präzisere Steuerung mit Ihrem CSS. Hier kommen komplexe Auswahltools ins Spiel.
Die folgenden Auswahlmethoden bieten zwar mehr Möglichkeiten, wir können aber nur abwärts kaskadieren, also untergeordnete Elemente auswählen. Wir können nicht nach oben ausrichten und ein übergeordnetes Element auswählen. Was die Kaskade ist und wie sie funktioniert, erfahren Sie in einer späteren Lektion.
Kombinatoren
Ein Kombinator befindet sich zwischen zwei Selektoren.
Wenn der Selektor beispielsweise p > strong
ist, ist das Zeichen >
der Kombinator.
Mithilfe der Auswahltools, die diese Kombinatoren verwenden, können Sie Elemente anhand ihrer Position im Dokument auswählen.
Nachkommen-Kombinator
Um Abfolge-Kombinatoren zu verstehen, müssen Sie zuerst übergeordnete und untergeordnete Elemente kennen.
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
Das übergeordnete Element ist das <p>
, das Text enthält.
Innerhalb dieses <p>
-Elements befindet sich ein <strong>
-Element, wodurch der Inhalt fett formatiert wird.
Da es sich im <p>
befindet, ist es ein untergeordnetes Element.
Mit einem Abfolge-Kombinator können wir ein untergeordnetes Element anvisieren.
Hier wird ein Leerzeichen () verwendet, um den Browser anzuweisen, nach untergeordneten Elementen zu suchen:
p strong {
color: blue;
}
Mit diesem Snippet werden alle <strong>
-Elemente ausgewählt, die nur untergeordnete Elemente von <p>
-Elementen sind. Sie werden rekursiv blau hervorgehoben.
Dieser Effekt wird im obigen Beispiel mithilfe des Kombinator-Sellektors .top div
besser veranschaulicht.
Mit dieser CSS-Regel wird diesen <div>
-Elementen ein linker Abstand hinzugefügt.
Da der Kombinator rekursiv ist, wird auf alle <div>
-Elemente in .top
dasselbe Padding angewendet.
Sehen Sie sich in dieser Demo den HTML-Bereich an. Das .top
-Element hat mehrere <div>
-untergeordnete Elemente, die wiederum <div>
-untergeordnete Elemente haben.
Nächstes Geschwisterelement
Wenn Sie nach einem Element suchen möchten, das direkt auf ein anderes Element folgt, können Sie in Ihrem Selector das Zeichen +
verwenden.
Wenn Sie zwischen gestapelten Elementen einen Abstand hinzufügen möchten, verwenden Sie den Kombinator „Nächstes Geschwisterelement“, um den Abstand nur hinzuzufügen, wenn ein Element ein nächstes Geschwisterelement eines untergeordneten Elements von .top
ist.
Mit der folgenden Auswahl können Sie allen untergeordneten Elementen von .top
einen Rand hinzufügen:
.top * {
margin-top: 1em;
}
Das Problem dabei ist, dass durch die Auswahl aller untergeordneten Elemente von .top
mit dieser Regel möglicherweise zusätzlicher, unnötiger Platz erzeugt wird.
Mit dem next sibling-Kombinator in Kombination mit einem universellen Selector können Sie nicht nur festlegen, welche Elemente einen Abstand erhalten, sondern auch beliebige Elemente damit versehen.
Das bietet dir langfristige Flexibilität, unabhängig davon, welche HTML-Elemente in .top
angezeigt werden.
Kombinator für nachfolgende Geschwister
Ein nachfolgender Kombinator ähnelt sehr dem Selektor „Nächster Bruder“.
Verwenden Sie jedoch anstelle des Zeichens +
das Zeichen ~
.
Der Unterschied besteht darin, dass ein Element nur einem anderen Element mit demselben übergeordneten Element folgen muss, anstatt das nächste Element mit demselben übergeordneten Element zu sein.
Dieser nachfolgende Kombinator ist etwas weniger starr. Das ist in Kontexten wie dem oben genannten Beispiel nützlich, in dem wir die Farbe eines benutzerdefinierten Schalters ändern, wenn das zugehörige Kästchen den Status :checked
hat.
Untergeordneter Combinator
Mit einem untergeordneten Kombinator (auch als direkter Nachkomme bezeichnet) haben Sie mehr Kontrolle über die Rekursion, die mit Kombinatoren verbunden ist.
Wenn Sie das Zeichen >
verwenden, wird der Kombinator-Selektor nur auf direkte untergeordnete Elemente angewendet.
Denken Sie an das vorherige Beispiel für die Auswahl des nächsten oder vorherigen Geschwisterelements. Der Abstand wird jedem nächsten übergeordneten Element hinzugefügt. Wenn eines dieser Elemente jedoch auch nächste übergeordnete Elemente als untergeordnete Elemente hat, kann dies zu unerwünschten zusätzlichen Abständen führen.
Ändern Sie die Nächster-Nebenknoten-Auswahl, um ein untergeordnetes Element einzubinden: > * + *
.
Die Regel gilt jetzt nur für direkt untergeordnete Elemente von .top
.
Zusammengesetzte Auswahl
Sie können Auswählte kombinieren, um die Spezifität und Lesbarkeit zu erhöhen.
Wenn Sie beispielsweise <a>
-Elemente mit der Klasse .my-class
anvisieren möchten, geben Sie Folgendes ein:
a.my-class {
color: red;
}
Dadurch wird nicht allen Links die Farbe Rot zugewiesen. Außerdem wird die Farbe Rot nur auf .my-class
angewendet, if es sich um ein <a>
-Element handelt.
Weitere Informationen finden Sie im Modul zur Spezifität.
Wissen testen
Ihr Wissen zu komplexen Auswahlen testen
Welches der folgenden Symbole ist kein Auswahlkombinator?
section.awesome { border: 1px solid hotpink; }
Der obige Selektor ist ein Beispiel für…