Selektoren

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.

Ein Bild einer CSS-Regel mit dem Selektor „.my-css-rule“.

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3. <ph type="x-smartling-placeholder">

Quelle

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;
}
In dieser Demo ruft der Operator „$“ in unserem Attributselektor den Dateityp aus dem Attribut „href“ ab. So ist es möglich, dem Label – basierend auf diesem Dateityp – mithilfe eines Pseudoelements das Präfix voranzustellen.

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?

Attribut
[] werden für einfache Attributselektoren verwendet.
ID
# werden für einfache ID-Selektoren verwendet.
universell
* ist der einfache universelle Selektor.
Klasse
. werden für einfache Selektoren class verwendet.
 
div {}

Welche Art von einfacher Selektor wird im obigen Snippet verwendet?

Klasse
Ein . wird für einfache class-Selektoren verwendet.
Typ
Für einfache type-Selektoren wird ein element-Name verwendet.
Attribut
Eckige Klammern [] werden für einfache Attributselektoren verwendet.
ID
Ein # 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?

:
Ein : wird für das Targeting auf Pseudoklassen verwendet.
::
Für das Targeting auf Pseudoelemente werden zwei :: verwendet.
:::
Dies ist ungültig und auf kein Targeting ausgerichtet.
 
p:hover {
  background: white;
  color: black;
}

Welche Art von Pseudoselektor wird im obigen Snippet verwendet?

Pseudoklasse
Ein : wird für das Targeting auf Pseudoklassen verwendet.
Pseudoelement
Für das Targeting auf Pseudoelemente werden zwei :: 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.

Da der untergeordnete Kombinator rekursiv ist, wird der Abstand angewendet, den Sie jedem untergeordneten Element hinzufügen, was zu einem Staffeleffekt führt.

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.

Verwenden Sie einen nachfolgenden Selektor zusammen mit einer Pseudoklasse „:checked“, um ein reines CSS-Switch-Element zu erstellen.

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?

>
Der direkte untergeordnete Kombinator.
÷
Das Symbol ist ungültig, kein CSS-Symbol.
+
Der nächste gleichgeordnete Kombinator.
*
Dies ist eine universelle, einfache Auswahl.
.
Der einfache Klassenselektor.
 
section.awesome {
  border: 1px solid hotpink;
}

Die Auswahl oben ist ein Beispiel für...

Kombinator
Symbol, mit dem Selektoren zu einem spezifischeren Symbol kombiniert werden können.
Kombinationsauswahl
Wenn zwei oder mehr Selektoren zusammen und ohne Kombinator verwendet werden, um einen spezifischeren Selektor zu erstellen
Terminator
Kein Selektortyp, aber das klingt so, als ob er nicht stimmt? 🤖

Ressourcen