CSS-Podcast – 002: Selektoren
Wenn Sie Text haben, der nur größer und rot sein soll, wenn es der erste Absatz des Artikels ist, 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 dieses bestimmte 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 darauf anzuwenden. von sehr einfach bis sehr komplex. um solche Situationen zu lösen.
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, mit einem oder mehreren Selektoren und mindestens einer Deklaration.
In dieser CSS-Regel ist der selector .my-css-rule
Damit werden alle Elemente mit der Klasse my-css-rule
auf der Seite gefunden.
Innerhalb der geschweiften Klammern befinden sich drei Deklarationen.
Eine Deklaration ist ein Eigenschafts-Wert-Paar, das Stile auf die Elemente anwendet, die mit den Selektoren übereinstimmen.
Eine CSS-Regel kann beliebig viele Deklarationen und Selektoren enthalten.
Einfache Selektoren
Die einfachste Gruppe von Selektoren zielt auf HTML-Elemente und Klassen, IDs und anderen Attributen, die einem HTML-Tag hinzugefügt werden können.
Universalselektor
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Ein universeller Selektor, auch Platzhalter genannt, stimmt mit jedem Element überein.
* {
color: hotpink;
}
Diese Regel sorgt dafür, dass jedes HTML-Element auf der Seite Hotpink-Text enthält.
Typauswahl
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
In einem HTML-Element können ein oder mehrere Elemente im Attribut class
definiert sein.
Die
Klassenauswahl
stimmt mit jedem Element überein, auf das diese Klasse angewendet wurde.
<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 gefärbt:
.my-class {
color: red;
}
Beachten Sie, dass .
nur in CSS und nicht im HTML-Code vorhanden ist.
Das liegt daran, dass das Zeichen .
die CSS-Sprache anweist, Klassenattributmitgliedern abzugleichen.
Dies ist ein gängiges Muster in CSS, bei dem ein Sonderzeichen,
oder eine Gruppe von Zeichen, wird zur Definition von Selektortypen verwendet.
Ein HTML-Element, das die Klasse .my-class
hat, wird trotzdem mit der obigen CSS-Regel abgeglichen,
auch wenn sie mehrere andere Klassen haben, z. B.:
<div class="my-class another-class some-other-class"></div>
Das liegt daran, dass CSS nach einem class
-Attribut sucht, das die definierte Klasse enthält.
anstatt genau mit dieser Klasse abzugleichen.
ID-Auswahl
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Ein HTML-Element mit einem id
-Attribut sollte das einzige Element auf einer Seite mit diesem ID-Wert sein.
Sie wählen Elemente mit einer
ID-Auswahl:
#rad {
border: 1px solid blue;
}
Dieses CSS würde dem HTML-Element, das ein id
von rad
hat, einen blauen Rahmen hinzufügen:
<div id="rad"></div>
Ähnlich wie bei der Klassenauswahl .
Verwenden Sie ein #
-Zeichen, um CSS anzuweisen, nach einem Element zu suchen, das mit dem nachfolgenden id
-Zeichen übereinstimmt.
Attributauswahl
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Sie können nach Elementen mit einem bestimmten HTML-Attribut suchen,
oder einen bestimmten Wert
für ein HTML-Attribut haben,
mithilfe der Attributauswahl.
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 ein Attribut von 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 auch nach Elementen suchen, bei denen das Attribut unabhängig von seinem Wert vorhanden ist.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Beide <div>
-Elemente haben roten Text.
Bei der Attributauswahl wird zwischen Groß- und Kleinschreibung unterschieden.
indem Sie der Attributauswahl einen s
-Operator hinzufügen.
[data-type='primary' s] {
color: red;
}
Wenn also ein HTML-Element den data-type
-Wert Primary
hat,
statt primary
, wird kein roter Text angezeigt.
Umgekehrt können Sie die Groß- und Kleinschreibung nicht berücksichtigen, indem Sie den Operator i
verwenden.
Zusammen mit Case-Operatoren haben Sie Zugriff auf Operatoren, die Teile von Zeichenfolgen innerhalb von Attributwerten abgleichen.
/* 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;
}
Gruppierungsselektoren
Ein Selector muss nicht mit nur einem einzelnen Element übereinstimmen. Sie können mehrere Selektoren 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 ausgeweitet.
Sie wird auch auf eine Klasse namens .my-class
und ein Element mit einem lang
-Attribut erweitert.
Wissen testen
Testen Sie Ihr Wissen über einfache Selektoren
* {}
Welche Art von einfacher Selektor wird im obigen Snippet verwendet?
[]
werden für einfache Attributselektoren verwendet.#
werden für einfache ID-Selektoren verwendet.*
ist der einfache universelle Selektor..
werden für einfache Selektoren class verwendet.div {}
Welche Art von einfacher Selektor wird im obigen Snippet verwendet?
.
wird für einfache class-Selektoren verwendet.element
-Name verwendet.[]
werden für einfache Attributselektoren verwendet.#
wird für einfache ID-Selektoren verwendet.Pseudoklassen und Pseudoelemente
CSS bietet nützliche Selektortypen für bestimmte Plattformstatus, z. B. wenn der Mauszeiger auf ein Element bewegt wird, Strukturen innerhalb eines Elements oder Teile eines Elements entstehen.
Pseudoklassen
HTML-Elemente befinden sich in verschiedenen Stadien, weil sie entweder interagieren, oder eines seiner untergeordneten Elemente sich in einem bestimmten Zustand befindet.
Beispielsweise könnte ein Nutzer den Mauszeiger auf ein HTML-Element bewegen, damit er die Maus über ein HTML-Element bewegt.
oder der Nutzer kann die Maus über ein untergeordnetes Element bewegen.
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 „Pseudoklassen“.
Pseudoelement
Pseudoelemente unterscheiden sich von Pseudoklassen, da sie nicht auf den Plattformstatus antworten,
agieren sie so, als würden sie ein neues Element mit CSS einfügen.
Außerdem unterscheiden sich Pseudoelemente syntaktisch von Pseudoklassen.
da wir anstelle 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,
Mit dem Pseudoelement ::before
können Sie Inhalte am Anfang eines Elements einfü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 für das Targeting auf bestimmte Teile eines Elements verwenden.
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 Inhalte zu gestalten, die von einem Nutzer hervorgehoben wurden.
::selection {
background: black;
color: white;
}
Weitere Informationen finden Sie im Modul zu Pseudoelementen.
Wissen testen
Testen Sie Ihr Wissen über Pseudoselektoren
Wie viele Doppelpunkte werden in Pseudoelement-Selektoren verwendet?
:
wird für das Targeting auf Pseudoklassen verwendet.::
verwendet.p:hover { background: white; color: black; }
Welche Art von Pseudoselektor wird im obigen Snippet verwendet?
:
wird für das Targeting auf Pseudoklassen verwendet.::
verwendet.Komplexe Selektoren
Sie haben bereits eine Reihe von Selektoren gesehen, Manchmal benötigen Sie jedoch eine genauere Steuerung Ihres Preisvergleichsportals. Hier kommen komplexe Selektoren ins Spiel.
Die folgenden Selektoren geben uns zwar mehr Einfluss, können wir nur kaskadieren nach unten, indem wir untergeordnete Elemente auswählen. Eine Ausrichtung nach oben und die Auswahl eines übergeordneten Elements ist nicht möglich. Wir erklären, was die Kaskade ist und wie sie funktioniert. weiteren Lektion.
Kombinatoren
Ein Kombinator befindet sich zwischen zwei Selektoren.
Wenn der Selektor beispielsweise p > strong
war, ist der Kombinator das Zeichen >
.
Mit den Selektoren, die diese Kombinatoren verwenden, können Sie Elemente basierend auf ihrer Position im Dokument auswählen.
Nachfolgerkombination
Um Nachfolgekombinatoren zu verstehen, müssen Sie sich zunächst mit über- und untergeordneten Elementen vertraut machen.
<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 sein Inhalt fett formatiert wird.
Da es sich innerhalb von <p>
befindet, ist es ein untergeordnetes Element.
Mit einem untergeordneten Kombinator können Sie ein Targeting auf ein untergeordnetes Element vornehmen.
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, sodass sie rekursiv blau werden.
Dieser Effekt lässt sich im obigen Beispiel besser visualisieren,
mithilfe der Kombinatorauswahl .top div
.
Diese CSS-Regel fügt diesen <div>
-Elementen einen linken Abstand hinzu.
Da der Kombinator rekursiv ist,
Auf alle <div>
-Elemente in .top
wird derselbe Innenrand angewendet.
Sehen Sie sich in dieser Demo das HTML-Steuerfeld an.
sehen Sie, dass das .top
-Element mehrere untergeordnete <div>
-Elemente hat, die
haben <div>
untergeordnete Elemente.
Nächster gleichgeordneter Kombinator
Sie können nach einem Element suchen, das direkt auf ein anderes Element folgt.
indem Sie im Selektor ein +
-Zeichen verwenden.
Um Platz zwischen gestapelten Elementen zu schaffen,
Nächsten gleichgeordneten Kombinator verwenden, um Platz hinzuzufügen
nur dann, wenn ein Element ein nächstes gleichgeordnetes Element eines untergeordneten Elements von .top
ist.
Sie könnten allen untergeordneten Elementen von .top
margin hinzufügen,
mithilfe der folgenden Auswahl:
.top * {
margin-top: 1em;
}
Da Sie jedes untergeordnete Element von .top
auswählen,
schafft diese Regel möglicherweise zusätzlichen, unnötigen Platz.
Den nächsten gleichgeordneten Kombinator,
In Kombination mit einem universellen Selektor können Sie nicht nur steuern, welche Elemente Platz erhalten,
aber auch Platz auf ein beliebiges Element anwenden.
Das bietet Ihnen langfristige Flexibilität,
unabhängig davon, welche HTML-Elemente in .top
angezeigt werden.
Begleiter – gleichgeordneter Kombinator
Ein nachfolgender Kombinator ähnelt sehr dem nächsten gleichgeordneten Selektor.
Anstelle eines +
-Zeichens
Verwenden Sie das Zeichen ~
.
Der Unterschied besteht darin, dass ein Element einfach einem anderen Element mit demselben übergeordneten Element folgen muss.
und ist nicht das nächste Element
mit demselben übergeordneten Element.
Dieser nachfolgende Kombinator bietet etwas weniger Steifheit,
was in Kontexten wie
dem obigen Beispiel nützlich ist,
Dabei wird die Farbe eines benutzerdefinierten Schalters geändert, wenn das zugehörige Kästchen den Status :checked
hat.
Untergeordneter Kombinator
Ein untergeordneter Kombinator (auch als direkter Nachfolger bezeichnet)
ermöglicht Ihnen mehr Kontrolle über die Rekursion, die mit Kombinatoren zur Verfügung steht.
Wenn Sie das Zeichen >
verwenden, wird die Kombinatorauswahl so eingeschränkt, dass sie nur für direkte untergeordnete Elemente gilt.
Sehen wir uns das vorherige, nächste Beispiel für eine gleichgeordnete Auswahl an. Der Gruppenbereich wird jedem nächsten gleichgeordneten Element hinzugefügt, Wenn eines dieser Elemente jedoch auch next gleichgeordnete Elemente als untergeordnete Elemente hat, kann dies zu unerwünschten zusätzlichen Abständen führen.
Um dieses Problem zu beheben,
Ändern Sie die Auswahl für nächste gleichgeordnete Elemente so, dass ein untergeordneter Kombinator eingebunden wird: > * + *
.
Die Regel gilt jetzt nur für direkte untergeordnete Elemente von .top
.
Zusammengesetzte Auswahlmöglichkeiten
Sie können Selektoren kombinieren, um die Genauigkeit und Lesbarkeit zu erhöhen.
Für das Targeting auf <a>
-Elemente
die auch die Klasse .my-class
haben, schreiben Sie Folgendes:
a.my-class {
color: red;
}
Dies würde nicht für alle Links rot sein.
Außerdem wird .my-class
nur dann rot gefärbt, wenn es sich in einem <a>
-Element befindet.
Weitere Informationen hierzu finden Sie im Modul zur Spezifität.
Wissen testen
Testen Sie Ihr Wissen zu komplexen Selektoren
Welches der folgenden Symbole ist kein Selektorkombinator?
section.awesome { border: 1px solid hotpink; }
Die Auswahl oben ist ein Beispiel für...