So zielen Sie mit CSS-Selektoren auf einen Teil einer Webseite
Mit Cascading Style Sheets (CSS) können Sie das Erscheinungsbild Ihrer Webseiten verändern. Von Schriftarten und Farben über Abstände bis hin zum Gesamtlayout stehen Ihnen alle Arten von Designwerkzeugen zur Verfügung. Obwohl CSS in seiner Gesamtheit eine komplizierte Sprache ist, müssen Sie zunächst nur zwei grundlegende Konzepte verstehen.
Alles beginnt damit, genau zu identifizieren, welchen Teil einer Seite Sie stylen möchten.
CSS = Selektoren + Deklarationen
Eine CSS-Datei enthält eine Reihe von Regeln, die beschreiben, wie eine HTML-Datei formatiert werden soll. Jede Regel besteht aus zwei Teilen: Was soll gestylt werden und wie soll es gestylt werden? Der erste Teil wird unter Verwendung einer Reihe von Begriffen gesteuert, die als "Selektoren" bekannt sind.
Beispiele in diesem Artikel sind Stildeklarationen, aber sie stehen nicht im Mittelpunkt: Die Selektoren selbst sind es.
In der Vergangenheit gab es drei CSS-Auswahlstufen (oder Versionen) mit unterschiedlichem Grad an Browserunterstützung. Laut Can I Use stehen diese im Jahr 2020 über 99 Prozent der Benutzer weltweit zur Verfügung.
Level 1 Selektoren
In Stufe 1 wurden die vier grundlegenden Selektortypen eingeführt, die auch heute noch eine Vielzahl von Fällen abdecken.
| Muster | Streichhölzer |
|---|---|
E | alle E-Elemente |
.c | alle Elemente mit class = "c" |
#myid | das Element mit id = "myid" |
EF | ein F-Element innerhalb eines E-Elements |
| Pseudoklassen | |
E:link | Ein Hyperlink zu einer Seite, die zuvor noch nicht besucht wurde |
E:visited | Ein Hyperlink zu einer Seite, die bereits besucht wurde |
E:active | Ein Hyperlink, der aktuell ausgewählt ist |
| Pseudoelemente | |
E::first-line | die erste formatierte Zeile eines E-Elements |
E::first-letter | der erste formatierte Buchstabe eines E-Elements |
Typauswahl
Der einfachste Selektor ist der „Typ-Selektor“. Es zielt auf alle Instanzen eines Elements ab, z. B. einen Absatz oder einen fett gedruckten Text:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Klassenauswahl
Mit dem Klassenattribut kann einem HTML-Element eine weitere Semantik hinzugefügt werden, z. B. ein bestimmter Absatztyp. Solche Elemente können in CSS wie folgt ausgewählt werden:
.intro { font-weight: bold; }Dieser Selektor würde übereinstimmen:
<p class="intro">…</p>Beachten Sie jedoch, dass es auch passen würde:
<ul class="intro">…</ul>Wenn Sie möchten, dass es nur für Intro-Absätze gilt, können Sie die Typauswahl und die Klassenauswahl kombinieren:
p.intro { font-weight: bold; }ID-Auswahl
Das HTML-ID-Attribut sollte innerhalb eines Dokuments eindeutig sein, z.
<div id="contents">…</div>Dies sollte das einzige Element mit einer "Inhalts" -ID sein. Mit einem ID-Selektor können Sie auf dieses bestimmte Element in einem Dokument abzielen:
#contents { color: #333; }Nachkommen Selektor
Streng genommen ein „Kombinator“, denn bei diesem Selektor dreht sich alles um den Raum zwischen zwei anderen. HTML ist hierarchisch, wie in unserer Übersicht über das DOM erläutert. Mit einem Nachkommen-Selektor kann ein Element anhand seines Kontexts in einem anderen Element identifiziert werden:
table b { font-weight: normal; }Pseudoklassen und Elemente
Pseudo-Selektoren zielen auf Klassen oder Elemente ab, die nicht explizit existieren, aber trotzdem verfügbar gemacht werden. Betrachten Sie sie als spezielle Inhaltsboni:
p::first-line { text-transform: uppercase; }Auswahllisten
Verwenden Sie ein Komma, um Selektoren zu einer Liste zu kombinieren, wenn Sie für jede dieselbe Regel anwenden möchten. Anstatt von:
th { padding: 1em; }
td { padding: 1em; }Du kannst schreiben:
th, td { padding: 1em; }Spezifität
Ein Stylesheet besteht aus einer Reihe von Regeln, die einen Selektor verwenden, um mit einem Element übereinzustimmen. Was passiert jedoch, wenn mehr als eine Regel mit einem bestimmten Element übereinstimmt? Das resultierende Verhalten wird durch die „Spezifität“ bestimmt, die definiert, welche Regel in einem Fall verwendet wird, wie z.
p.intro { color: black; }
p { color: gray; }In solchen Fällen wird die vorrangige Regel durch ihre Spezifität wie folgt definiert:
- ID-Selektoren (`# Inhalt`) sind die spezifischsten.
- Klassenselektoren (`.author`) sind weniger spezifisch.
- Typselektoren (`p`) sind am wenigsten spezifisch.
Bei der Berechnung der Spezifität wird jede Ebene nur berücksichtigt, wenn zwei Selektoren auf der höheren Ebene dieselbe Punktzahl haben. Daher ist "#contents" spezifischer als "article.news p.author.special", da die erstere bei ID-Selektoren "gewinnt".
Level 2 Selektoren
Mit der nächsten Überarbeitung der CSS-Selektoren wurden Attributselektoren eingeführt, Pseudoklassen und Pseudoelemente erweitert und zwei neue Kombinatoren hinzugefügt.
| Muster | Streichhölzer |
|---|---|
* | jedes Element |
E > F | ein F-Element Kind eines E-Elements |
E + F | ein F-Element, dem unmittelbar ein E-Element vorausgeht |
| Attributselektoren | |
E[foo] | ein E-Element mit einem "foo" -Attribut |
E[foo="bar"] | ein E-Element, dessen "foo" -Attribut genau "bar" ist |
E[foo~="bar"] | ein E-Element, dessen "foo" -Attribut eine Liste von durch Leerzeichen getrennten Werten ist, von denen einer "bar" ist. |
E[foo|="en"] | ein E-Element, dessen "foo" -Attribut eine durch Bindestriche getrennte Liste von Werten enthält, die mit "en" beginnen |
| Pseudoklassen | |
E:first-child | ein E-Element, erstes Kind seines Elternteils |
E:lang(fr) | ein Element vom Typ E in der Sprache "fr" |
| Pseudoelemente | |
E::before | generierter Inhalt vor dem Inhalt eines E-Elements |
E::after | generierter Inhalt nach dem Inhalt eines E-Elements |
Universal Selector
Das "*" entspricht einem beliebigen Element. Es ist nicht oft so nützlich, aber wenn Sie beispielsweise Standardränder zurücksetzen möchten, können Sie dies tun:
* { margin: 0; }Attributselektoren
Attributselektoren ermöglichen die gezielte Ausrichtung von Stilen, gefiltert nach dem Attribut eines Elements:
a[title] { text-decoration: underline dotted; }Kinderkombinator: Ein Element unmittelbar in einem anderen
Ähnlich wie der Nachkommen-Kombinator, aber dieser passt nur zu unmittelbaren Kindern, nicht zu Nachkommen weiter unten im Baum. Zum Beispiel stimmt "ul> li" hier nur mit dem Text "Abschnitt 1" überein und nicht mit "Abschnitt 1.1":
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Angrenzender Geschwisterkombinator: Das nächste Geschwister
h1 + p { font-weight: bold; }Dieser Selektor ist häufig nützlich, um Ränder oder einen einleitenden Absatz ohne eine bestimmte Klasse zu steuern. Er entspricht nur dann einem Element, wenn er unmittelbar auf ein anderes folgt. Im Beispiel wird nur der erste Absatz hier abgeglichen, nicht der zweite:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Beachten Sie, dass dieser Selektor nur Elemente berücksichtigt – nicht Text -, wenn Sie entscheiden, was das nächste Geschwister ist.
Erbe
Einige CSS-Eigenschaften erben ihren Wert von einem Vorfahrenelement. In der Praxis bedeutet dies beispielsweise, dass das Festlegen der Schriftfläche des Elements „body“ bedeutet, dass jeder Absatz, jede Tabelle usw. dieselbe Schriftfläche verwendet.
Dies ist natürlich genau das, was Sie erwarten würden, aber betrachten Sie eine Eigenschaft, die nicht erbt: zum Beispiel "margin". Sie möchten nicht, dass jeder einzelne Absatz oder jedes Stück Fettdruck den gleichen Rand wie das gesamte Dokument hat.
Eine gute Faustregel ist es, Elemente so allgemein wie sinnvoll anzuvisieren – zielen Sie nicht auf jedes einzelne Element, wenn dies mit einem einfachen „Körper“ -Selektor möglich ist.
Level 3 Selektoren
Neben einigen Attributselektoren und einem neuen Kombinator wurden in dieser Ebene viele weitere Pseudoklassen hinzugefügt.
| Muster | Streichhölzer |
|---|---|
E ~ F | ein F-Element, dem ein E-Element vorangestellt ist |
| Attributselektoren | |
E[foo^="bar"] | ein E-Element, dessen "foo" -Attribut mit der Zeichenfolge "bar" beginnt |
E[foo$="bar"] | ein E-Element, dessen "foo" -Attribut mit der Zeichenfolge "bar" endet |
E[foo*="bar"] | ein E-Element, dessen "foo" -Attribut den Teilstring "bar" enthält |
| Pseudoklassen | |
E:root | ein E-Element, Wurzel des Dokuments |
E:nth-child(n) | ein E-Element, das n-te Kind seines Elternteils |
E:nth-last-child(n) | ein E-Element, das n-te Kind seines Elternteils, das vom letzten zählt |
E:nth-of-type(n) | ein E-Element, das n-te Geschwister seines Typs |
E:nth-last-of-type(n) | ein E-Element, das n-te Geschwister seines Typs, das vom letzten zählt |
E:last-child | ein E-Element, letztes Kind seines Elternteils |
E:first-of-type | ein E-Element, erstes Geschwister seiner Art |
E:last-of-type | ein E-Element, letztes Geschwister seiner Art |
E:only-child | ein E-Element, einziges Kind seines Elternteils |
E:only-of-type | ein E-Element, nur Geschwister seines Typs |
E:empty | ein E-Element ohne untergeordnete Elemente (einschließlich Textknoten) |
E:target | Ein E-Element ist das Ziel der verweisenden URI |
E:enabled | ein Benutzeroberflächenelement E, das aktiviert ist |
E:disabled | ein Benutzeroberflächenelement E, das deaktiviert ist |
E:checked | ein Benutzeroberflächenelement E, das überprüft wird |
E:not(s) | ein E-Element, das nicht mit einfachen Selektoren übereinstimmt |
Attributselektoren
Sie können Elemente mit einem Attribut auswählen, das mit einem bestimmten Wert beginnt: a[href^="https:"] , mit einem bestimmten Wert endet: img[src$=".gif"] oder einen Wert enthält: a[*="value"] .
Pseudoklassen
Zusätzliche Pseudoklassen sind ": last-child", ": empty" (um einem Element ohne Inhalt zu entsprechen) und ": checked", die einem Element wie einer Checkbox-Eingabe entsprechen, jedoch nur, wenn es aktiviert ist.
Allgemeiner Geschwisterkombinator: Ein nachfolgendes Geschwister
Ähnlich wie beim Adjacent Sibling Combinator von Level 2 passt dies zu jedem Geschwister, das nach dem anderen kommt, nicht nur zum nächsten:
h1 ~ p { font-size: 110%; }CSS-Selektoren und deren Verwendung
Jetzt wissen Sie fast alles, was Sie wissen müssen, um einen Teil einer Webseite mit CSS auszuwählen. Jetzt können Sie Ihre Seiten mit einer Vielzahl von CSS-Eigenschaften gestalten, die alles von Farben bis zum Layout abdecken.
Bildnachweis : Pankaj Patel / Unsplash