CSS Podcast – 002: Selectors
Angenommen, Sie haben Text, der nur größer und rot dargestellt werden soll, wenn es sich um den ersten Absatz eines Artikels handelt. Wie machen Sie das?
<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 ein bestimmtes Element zu finden und eine CSS-Regel wie diese anzuwenden.
article p:first-of-type {
color: red;
font-size: 1.5em;
}
CSS bietet Ihnen viele Optionen, um Elemente auszuwählen und Regeln auf sie anzuwenden, von sehr einfach bis sehr komplex, um Situationen wie diese zu lösen.
Bestandteile einer CSS-Regel
Es ist wichtig, die Bestandteile einer CSS-Regel zu kennen, um die Funktionsweise von Selektoren und ihre Rolle in CSS zu verstehen. Eine CSS-Regel ist ein Codeblock, der einen oder mehrere Selektoren und eine oder mehrere Deklarationen enthält.
In dieser CSS-Regel ist der selector .my-css-rule
, der alle Elemente mit der Klasse my-css-rule
auf der Seite findet.
In den geschweiften Klammern befinden sich drei Deklarationen.
Eine -Deklaration ist ein Eigenschafts-Wert-Paar, das Stile auf die mit den Selektoren übereinstimmenden Elemente anwendet.
Eine CSS-Regel kann beliebig viele Deklarationen und Selektoren haben.
Einfache Selectors
Die einfachste Gruppe von Selektoren ist auf HTML-Elemente sowie Klassen, IDs und andere Attribute ausgerichtet, die einem HTML-Tag hinzugefügt werden können.
Universalselektor
Ein Universalselektor – auch Platzhalter genannt – entspricht einem beliebigen Element.
* {
color: hotpink;
}
Diese Regel bewirkt, dass jedes HTML-Element auf der Seite Hotpink-Text enthält.
Typauswahl
Ein Typselektor stimmt direkt mit einem HTML-Element überein.
section {
padding: 2em;
}
Diese Regel sorgt dafür, dass jedes <section>
-Element auf allen Seiten 2em
von padding
hat.
Klassenauswahl
In einem HTML-Element können ein oder mehrere Elemente im class
-Attribut definiert sein.
Der Klassenselektor entspricht jedem Element, auf das diese Klasse angewendet wird.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
Jedes Element, auf das die Klasse angewendet wurde, wird rot dargestellt:
.my-class {
color: red;
}
Beachten Sie, dass .
nur in CSS und nicht im HTML-Code vorhanden ist.
Dies liegt daran, dass das Zeichen .
die CSS-Sprache anweist, Klassenattributmitgliedern abzugleichen.
Dies ist ein gängiges Muster in CSS, bei dem Selektortypen mit einem Sonderzeichen oder einer Reihe von Zeichen definiert werden.
Ein HTML-Element mit der Klasse .my-class
wird trotzdem mit der obigen CSS-Regel abgeglichen, auch wenn es mehrere andere Klassen hat:
<div class="my-class another-class some-other-class"></div>
Dies liegt daran, dass CSS nach einem class
-Attribut sucht, das die definierte Klasse enthält und nicht genau mit dieser Klasse übereinstimmt.
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 das HTML-Element mit dem id
-Wert rad
wie folgt blau umrandet:
<div id="rad"></div>
Verwenden Sie ähnlich wie beim Klassenselektor .
das Zeichen #
, um CSS anzuweisen, nach einem Element zu suchen, das mit dem darauffolgenden id
übereinstimmt.
Attributauswahl
Mit der Attributauswahl können Sie nach Elementen suchen, die ein bestimmtes HTML-Attribut oder einen bestimmten Wert für ein HTML-Attribut haben.
Weisen Sie CSS an, nach Attributen zu suchen, indem Sie den Selektor in eckige Klammern ([ ]
) setzen.
[data-type='primary'] {
color: red;
}
Dieses CSS sucht nach allen Elementen, die das Attribut data-type
mit dem Wert primary
haben. Beispiel:
<div data-type="primary"></div>
Anstatt nach einem bestimmten Wert von data-type
zu suchen, können Sie unabhängig von seinem Wert auch nach Elementen mit dem vorhandenen Attribut suchen.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Beide <div>
-Elemente haben einen roten Text.
Wenn Sie eine Attributauswahl verwenden möchten, bei der die Groß- und Kleinschreibung berücksichtigt wird, fügen Sie der Attributauswahl den Operator s
hinzu.
[data-type='primary' s] {
color: red;
}
Wenn also ein HTML-Element für data-type
statt primary
den Wert Primary
hätte, wird kein roter Text angezeigt.
Umgekehrt können Sie den Operator i
verwenden, um die Groß- und Kleinschreibung zu berücksichtigen.
Neben den Operatoren für die Groß-/Kleinschreibung 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 Selector muss nicht nur mit einem einzelnen Element übereinstimmen. Sie können mehrere Selectors gruppieren, indem Sie sie durch Kommas trennen:
strong,
em,
.my-class,
[lang] {
color: red;
}
In diesem Beispiel wird die Farbänderung auf <strong>
- und <em>
-Elemente ausgeweitet.
Sie wird auch auf eine Klasse namens .my-class
und ein Element mit einem lang
-Attribut erweitert.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über einfache Selectors
* {}
Welche Art von einfachen Selektor wird im Snippet oben verwendet?
[]
werden für einfache Attributselektoren verwendet.#
werden für einfache ID-Selektoren verwendet.*
ist der universelle einfache Selektor..
werden für einfache Selectors vom Typ class verwendet.div {}
Welche Art von einfachen Selektor wird im Snippet oben verwendet?
.
wird für einfache Selektoren class verwendet.element
-Name wird für einfache type-Selektoren verwendet.[]
werden für einfache Selektoren attribute verwendet.#
wird für einfache ID-Selektoren verwendet.Pseudoklassen und Pseudoelemente
CSS bietet nützliche Selektortypen, die sich auf einen bestimmten Plattformstatus konzentrieren, z. B. wenn der Mauszeiger auf ein Element bewegt wird, Strukturen innerhalb eines Elements oder Teile eines Elements.
Pseudoklassen
HTML-Elemente haben verschiedene Status, entweder weil mit ihnen interagiert wird oder weil eines ihrer untergeordneten Elemente einen bestimmten Status hat.
Beispielsweise kann der Nutzer die Maus über ein HTML-Element bewegen oder ein untergeordnetes Element.
Verwenden Sie in diesen Situationen 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 handeln, als würden sie ein neues Element mit CSS einfügen.
Pseudoelemente unterscheiden sich syntaktisch von Pseudoklassen, da wir statt eines einzelnen Doppelpunktes (:
) einen doppelten Doppelpunkt (::
) verwenden.
.my-element::before {
content: 'Prefix - ';
}
Wie in der Demo oben, in der Sie dem Label eines Links den Dateityp vorangestellt haben, können Sie das Pseudoelement ::before
verwenden, um Inhalt am Anfang eines Elements einzufügen, oder das Pseudoelement ::after
, um Inhalt am Ende eines Elements einzufügen.
Pseudoelemente sind jedoch nicht auf das Einfügen von Inhalten beschränkt.
Sie können sie auch verwenden, um ein Targeting auf bestimmte Teile eines Elements vorzunehmen.
Angenommen, Sie haben eine Liste.
Mit ::marker
können Sie die einzelnen Aufzählungspunkte (oder Zahlen) in der Liste gestalten
/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}
Sie können auch ::selection
verwenden, um die von einem Nutzer hervorgehobenen Inhalte zu gestalten.
::selection {
background: black;
color: white;
}
Weitere Informationen finden Sie im Modul zu Pseudoelementen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Pseudo-Selektoren
Wie viele Doppelpunkte werden von Pseudoelementselektoren verwendet?
:
wird für das Targeting auf Pseudoklassen verwendet.::
verwendet.p:hover { background: white; color: black; }
Welche Art von Pseudoselektor wird im Snippet oben verwendet?
:
wird für das Targeting auf Pseudoklassen verwendet.::
verwendet.Komplexe Selectors
Sie kennen bereits eine Vielzahl von Selektoren, manchmal benötigen Sie jedoch mit Ihrem CSS-Code eine genauere Steuerung. Hier kommen komplexe Selektoren ins Spiel.
An dieser Stelle ist zu beachten, dass die folgenden Selectors zwar mehr Leistung bringen, wir aber nur nach unten kaskadieren können, um untergeordnete Elemente auszuwählen. Das Targeting nach oben und die Auswahl eines übergeordneten Elements sind nicht möglich. Was eine Kaskade ist und wie sie funktioniert, erfahren Sie in einer späteren Lektion.
Kombinatoren
Ein Kombinator ist das, was sich zwischen zwei Selectors befindet.
Wenn der Selektor beispielsweise p > strong
lautet, ist der Kombinator das Zeichen >
.
Die Selektoren mit diesen Kombinatoren helfen Ihnen, Elemente basierend auf ihrer Position im Dokument auszuwählen.
Nachkommen-Kombinator
Um untergeordnete Kombinatoren zu verstehen, müssen Sie zuerst die übergeordneten und untergeordneten Elemente verstehen.
<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, dessen Inhalt fett formatiert wird.
Da es sich innerhalb von <p>
befindet, ist es ein untergeordnetes Element.
Ein untergeordneter Kombinator ermöglicht das Targeting auf ein untergeordnetes Element.
Dabei 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. Dadurch werden sie rekursiv blau.
Dieser Effekt wird im obigen Beispiel mithilfe des Kombinationsselektors .top div
besser veranschaulicht.
Mit dieser CSS-Regel wird den <div>
-Elementen ein linker Abstand hinzugefügt.
Da der Kombinator rekursiv ist, wird auf alle <div>
-Elemente, die sich in .top
befinden, dasselbe Padding angewendet.
Im HTML-Bereich in dieser Demo sehen Sie, dass das .top
-Element mehrere untergeordnete <div>
-Elemente hat, die selbst wiederum <div>
-untergeordnete Elemente haben.
Nächste gleichgeordnete Kombinatorin
Mit dem Zeichen +
im Selektor können Sie nach einem Element suchen, das direkt auf ein anderes Element folgt.
Wenn Sie einen Abstand zwischen gestapelten Elementen hinzufügen möchten, verwenden Sie das nächste gleichgeordnete Kombinator-Element. Damit wird nur dann ein Leerzeichen gesetzt, wenn ein Element ein nächstes gleichgeordnetes Element 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 diese Regel möglicherweise zusätzlicher, unnötiger Platz entsteht, da Sie jedes untergeordnete Element von .top
auswählen.
Mit dem nächsten gleichgeordneten Kombinator in Kombination mit einem universellen Selektor können Sie nicht nur steuern, welche Elemente Platz erhalten, sondern auch beliebigen Elementen Raum zuweisen.
Dies bietet Ihnen langfristig Flexibilität, unabhängig davon, welche HTML-Elemente in .top
angezeigt werden.
Nachfolgender gleichgeordneter Kombinator
Ein nachfolgender Kombinator ist einem Selektor auf der nächsten gleichgeordneten Entität sehr ähnlich.
Verwenden Sie jedoch anstelle des Zeichens +
das Zeichen ~
.
Der Unterschied besteht darin, dass ein Element nur auf ein anderes Element mit demselben übergeordneten Element folgen muss, anstatt das nächste Element mit demselben übergeordneten Element zu sein.
Dieser nachfolgende Kombinator bietet etwas weniger Steifheit, was in Kontexten wie dem obigen Beispiel nützlich ist, wenn die Farbe eines benutzerdefinierten Schalters geändert wird, wenn das zugehörige Kästchen den Status :checked
hat.
Untergeordneter Kombinator
Mit einem untergeordneten Kombinator (auch als direkten Nachfolger bezeichnet) können Sie die Rekursion mit Kombinatorenelektoren besser steuern.
Mit dem Zeichen >
beschränken Sie die Kombinationsauswahl so, dass sie nur für direkte untergeordnete Elemente gilt.
Sehen wir uns das Beispiel des vorherigen, nächsten gleichgeordneten Selektors an. Das Leerzeichen wird jedem nächsten gleichgeordneten Element hinzugefügt. Wenn eines dieser Elemente jedoch auch nächste gleichgeordnete Elemente als untergeordnete Elemente enthält, kann dies zu unerwünschten, zusätzlichen Abständen führen.
Um dieses Problem zu beheben, ändern Sie den nächsten gleichgeordneten Selektor in einen untergeordneten Kombinator: > * + *
.
Die Regel gilt jetzt nur für direkt untergeordnete Elemente von .top
.
Zusammengesetzte Selektoren
Sie können Selectors kombinieren, um Spezifität und Lesbarkeit zu verbessern.
Wenn Sie beispielsweise <a>
-Elemente als Ziel verwenden möchten, die auch die Klasse .my-class
haben, schreiben Sie Folgendes:
a.my-class {
color: red;
}
Dadurch wird nicht auf alle Links eine rote Farbe angewendet, sondern die rote Farbe wird auch nur auf .my-class
angewendet, if es sich in einem <a>
-Element befindet.
Weitere Informationen dazu finden Sie im Spezifitätsmodul.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über komplexe Selectors
Welches der folgenden Symbole ist keine Selektorkombination?
section.awesome { border: 1px solid hotpink; }
Die obige Auswahl ist ein Beispiel für...