CSS Selektoren
CSS (Cascading Style Sheets) bietet eine Vielzahl von Selektoren zum Auswählen von HTML-Elementen, auf die Stile angewendet werden sollen.
CSS-Selektoren sind Muster, mit denen die Elemente ausgewählt werden, die Sie formatieren möchten.
Die Spalte "CSS" in der folgenden Tabelle gibt die CSS-Version an, in der die Eigenschaft definiert ist. CSS1, CSS2 und CSS3 sind verschiedene Versionen von Cascading Style Sheets, die jeweils neue Funktionen und Möglichkeiten einführen, um die Kontrolle und das Design von Webseitenstilen zu verbessern.
Gängige CSS-Selektoren
Im Folgenden finden Sie einige gängige CSS-Selektoren:
Elementselektor:Wählt HTML-Elemente anhand des Elementnamens aus.
Der folgende Code,pDer Selektor wählt alle<p>Elemente aus:
p {
color: blue;
}
Klassenselektor:Wählt HTML-Elemente mit einer bestimmten Klasse anhand des Klassennamens aus.
Klassenselektoren beginnen mit.beginnend mit, gefolgt vom Klassennamen.
Der folgende Code,.highlightDer Selektor wählt alle Elemente mit der Klasse"highlight"Elemente aus.
.highlight {
background-color: yellow;
}
ID-Selektor:Wählt HTML-Elemente anhand der eindeutigen Kennung (ID) des Elements aus.
ID-Selektoren beginnen mit#beginnen mit, gefolgt vom ID-Namen.
Der folgende Code,#exampleDer Selektor wählt Elemente mit der ID"example"Elemente aus.
#example {
width: 200px;
}
Attributselektor:Wählt HTML-Elemente anhand der Attribute des Elements aus. Attributselektoren können anhand von Attributnamen und Attributwerten auswählen.
Der folgende Code,input[type="text"]Der Selektor wählt alletypeDie Eigenschaft ist"text"das <input>-Element.
input[type="text"] {
border: 1px solid gray;
}Nachfahrenselektor:Wählt HTML-Elemente durch Angabe der Nachfahrenbeziehung von Elementen aus.
Der Nachfahrenselektor verwendet Leerzeichen, um Elementnamen zu trennen.
Im folgenden Code wählt der Selektor div p alle <p>-Elemente innerhalb von <div>-Elementen aus.
div p {
font-weight: bold;
}Weitere Selektoren finden Sie in der folgenden Tabelle:
| Selektoren | Beispiel | Beitragserklärung | CSS |
|---|---|---|---|
| .class | .intro | Wählt alle Elemente mit class="intro" aus. | 1 |
| #id | #firstname | Wählt alle Elemente mit id="firstname" aus | 1 |
| * | * | Alle Elemente auswählen | 2 |
| element | p | Wählt alle <p>-Elemente aus | 1 |
| element,element | div,p | Wählt alle <div>-Elemente und <p>-Elemente aus | 1 |
| element.class | p.hometown | Wählt alle <p>-Elemente mit class="hometown" aus | 1 |
| element element | div p | Wählt alle <p>-Elemente innerhalb von <div>-Elementen aus | 1 |
| element>element | div>p | Wählt alle <p>-Elemente aus, deren Elternelement ein <div>-Element ist | 2 |
| element+element | div+p | Wählt das erste <p>-Element aus, das unmittelbar auf ein <div>-Element folgt | 2 |
| [Attribut] | [target] | Wählt alle Elemente mit einem target-Attribut aus | 2 |
| [attribute=value] | [target=-blank] | Wählt alle Elemente mit target="-blank" aus | 2 |
| [attribute~=value] | [title~=flower] | Wählt alle Elemente aus, deren title-Attribut das Wort "flower" enthält | 2 |
| [attribute|=language] | [lang|=en] | Wählt Elemente aus, deren lang-Attribut gleichenist, oder miten-alle Elemente, die damit beginnen | 2 |
| :link | a:link | Wählt alle unbesuchten Links aus | 1 |
| :visited | a:visited | Wählt alle besuchten Links aus | 1 |
| :active | a:active | Wählt aktive Links aus | 1 |
| :hover | a:hover | Wählt aus, wenn sich die Maus über einem Link befindet | 1 |
| :focus | input:focus | Wählt Eingabeelemente aus, die den Fokus haben | 2 |
| :first-letter | p:first-letter | Wählt den ersten Buchstaben jedes <p>-Elements aus | 1 |
| :first-line | p:first-line | Wählt die erste Zeile jedes <p>-Elements aus | 1 |
| :first-child | p:first-child | Gibt den Stil nur an, wenn ein <p>-Element das erste Kind seines übergeordneten Elements ist. | 2 |
| :before | p:before | Fügt Inhalt vor jedem <p>-Element ein | 2 |
| :after | p:after | Fügt Inhalt nach jedem <p>-Element ein | 2 |
| :lang(Sprache) | p:lang(it) | Wählt alle <p>-Elemente aus, deren lang-Attribut einen Anfangswert von "it" hat | 2 |
| element1~element2 | p~ul | Wählt jedes <ul>-Element aus, das auf ein <p>-Element folgt | 3 |
| [attribute^=value] | a[src^="https"] | Wählt jedes Element aus, dessen src-Attributwert mit "https" beginnt | 3 |
| [attribute$=value] | a[src$=".pdf"] | Wählt jedes Element aus, dessen src-Attributwert mit ".pdf" endet | 3 |
| [attribute*=value] | a[src*="example"] | Wählt jedes Element aus, dessen src-Attributwert die Teilzeichenkette "example" enthält | 3 |
| :first-of-type | p:first-of-type | Wählt jedes <p>-Element aus, das das erste <p>-Element seines Elternelements ist | 3 |
| :last-of-type | p:last-of-type | Wählt jedes <p>-Element aus, das das letzte <p>-Element seines Elternelements ist | 3 |
| :only-of-type | p:only-of-type | Wählt jedes <p>-Element aus, das das einzige <p>-Element seines Elternelements ist | 3 |
| :only-child | p:only-child | Wählt jedes <p>-Element aus, das das einzige Kind seines Elternelements ist | 3 |
| :nth-child(n) | p:nth-child(2) | Wählt jedes <p>-Element aus, das das zweite Kind seines Elternelements ist | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Wählt jedes <p>-Element aus, das das zweite Kind seines Elternelements ist, vom letzten Kind aus gezählt | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Wählt jedes <p>-Element aus, das das zweite <p>-Element seines Elternelements ist | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wählt jedes <p>-Element aus, das das zweite <p>-Element seines Elternelements ist, vom letzten Kind aus gezählt | 3 |
| :last-child | p:last-child | Wählt jedes <p>-Element aus, das das letzte Kind seines Elternelements ist. | 3 |
| :root | :root | Wählt das Wurzelelement des Dokuments aus | 3 |
| :empty | p:empty | Wählt jedes <p>-Element aus, das keine Kinder hat (einschließlich Textknoten) | 3 |
| :target | #news:target | Wählt das aktuell aktive #news-Element aus (die angeklickte URL, die diesen Ankernamen enthält) | 3 |
| :enabled | input:enabled | Wählt jedes aktivierte input-Element aus | 3 |
| :disabled | input:disabled | Wählt jedes deaktivierte input-Element aus | 3 |
| :checked | input:checked | Wählt jedes ausgewählte input-Element aus | 3 |
| :not(selector) | :not(p) | Wählt jedes Element aus, das kein <p>-Element ist | 3 |
| ::selection | ::selection | Trifft auf den Teil eines Elements zu, der vom Benutzer ausgewählt oder hervorgehoben wurde | 3 |
| :out-of-range | :out-of-range | Trifft auf input-Elemente zu, deren Wert außerhalb des angegebenen Bereichs liegt | 3 |
| :in-range | :in-range | Trifft auf input-Elemente zu, deren Wert innerhalb des angegebenen Bereichs liegt | 3 |
| :read-write | :read-write | Wird verwendet, um lesbare und beschreibbare Elemente zu selektieren | 3 |
| :read-only | :read-only | Wird verwendet, um Elemente mit gesetztem "readonly"-Attribut zu selektieren | 3 |
| :optional | :optional | Wird verwendet, um optionale input-Elemente zu selektieren | 3 |
| :required | :required | Wird verwendet, um Elemente mit gesetztem "required"-Attribut zu selektieren | 3 |
| :valid | :valid | Dient zum Abgleichen von Elementen mit gültigen Eingabewerten | 3 |
| :invalid | :invalid | Dient zum Abgleichen von Elementen mit ungültigen Eingabewerten | 3 |
| :has | :has | Ermöglicht die Auswahl eines Elements basierend auf seinen Nachkommenelementen. | 3 |
| :is | :is | Akzeptiert beliebig viele Selektoren als Parameter und gibt die Vereinigung der von diesen Selektoren abgeglichenen Elemente zurück. | 3 |