CSS
Selektoren

Einführung

Syntax

• # id
• . Klassenname
• : Pseudoklassenname
• :: Pseudoelementname
• [ attr ] / * hat das Attribut attr . * /
• [ attr = " value "] / * hat das Attribut attr , und sein Wert ist genau " value ". * /
• [ attr ~ = " value "] / * hat das Attribut attr , und sein Wert enthält, wenn er auf Leerzeichen aufgeteilt ist , " value ". * /
• [ attr | = " value "] / * hat das attr- Attribut und sein Wert ist genau " value " oder sein Wert beginnt mit " value - ". * /
• [ attr ^ = " value "] / * hat das Attribut attr , und sein Wert beginnt mit " value ". * /
• [ attr $ = " value "] / * hat das Attribut attr , und sein Wert endet mit " value ". * /
• [ attr * = " value "] / * hat das Attribut attr , und sein Wert enthält " value ". * /
• Elementname
• *

Bemerkungen

Attribut-Selektoren

Überblick

Attributselektoren können mit verschiedenen Arten von Operatoren verwendet werden, die die Auswahlkriterien entsprechend ändern. Sie wählen ein Element anhand des Vorhandenseins eines bestimmten Attributs oder Attributwerts aus.

Anmerkungen:

1. Der Attributwert kann entweder in einfache oder doppelte Anführungszeichen gesetzt werden. Es können auch keine Anführungszeichen funktionieren, dies gilt jedoch gemäß dem CSS-Standard und wird nicht empfohlen.

2. Es gibt keine integrierte CSS4-Spezifikation, da diese in separate Module aufgeteilt ist. Es gibt jedoch "Level 4" -Module. Siehe Browserunterstützung .

Einzelheiten

[attribute]

Wählt Elemente mit dem angegebenen Attribut aus.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live Demo auf JSBin

[attribute="value"]

Wählt Elemente mit dem angegebenen Attribut und Wert aus.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live Demo auf JSBin

[attribute*="value"]

Wählt Elemente mit dem angegebenen Attribut und Wert aus, wobei das angegebene Attribut den angegebenen Wert an einer beliebigen Stelle (als Unterzeichenfolge) enthält.

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Live Demo auf JSBin

[attribute~="value"]

Wählt Elemente mit dem angegebenen Attribut und Wert aus, wobei der angegebene Wert in einer durch Leerzeichen getrennten Liste angezeigt wird.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Live Demo auf JSBin

[attribute^="value"]

Wählt Elemente mit dem angegebenen Attribut und Wert aus, bei denen das angegebene Attribut mit dem Wert beginnt.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Live Demo auf JSBin

[attribute$="value"]

Wählt Elemente mit dem angegebenen Attribut und Wert aus, wobei das angegebene Attribut mit dem angegebenen Wert endet.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Live Demo auf JSBin

[attribute|="value"]

Wählt Elemente mit einem bestimmten Attribut und einem Wert aus, wobei der Wert des Attributs genau dem angegebenen Wert oder genau dem angegebenen Wert gefolgt von - (U + 002D) entspricht.

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Live Demo auf JSBin

[attribute="value" i]

Wählt Elemente mit einem bestimmten Attribut und Wert , bei dem der Wert des Attributs kann dargestellt werden als Value , VALUE , vAlUe oder andere Groß- und Kleinschreibung Möglichkeit.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Live Demo auf JSBin

Spezifität der Attributselektoren

0-1-0

Entspricht dem Klassenselektor und der Pseudoklasse.

*[type=checkbox] // 0-1-0

Beachten Sie, dass dies bedeutet, dass ein Attributselektor verwendet werden kann, um ein Element anhand seiner ID auf einer niedrigeren #my-ID auszuwählen, als wenn es mit einem ID-Selektor ausgewählt wurde : [id="my-ID"] zielt auf dasselbe Element wie #my-ID aber mit geringerer Spezifität.

Weitere Informationen finden Sie im Abschnitt "Syntax" .

Kombinatoren

Überblick

Hinweis: Geschwister-Selektoren zielen auf Elemente, die im Quelldokument nach ihnen kommen. CSS kann (aufgrund seiner Kaskaden) nicht auf frühere oder übergeordnete Elemente zielen. Unter Verwendung der Flex- order kann jedoch ein vorheriger Geschwister-Selektor auf visuellen Medien simuliert werden .

Nachkomme-Combinator: selector selector

Ein Nachkomme-Kombinator, dargestellt durch mindestens ein Leerzeichen ( ) wählt Elemente aus, die von dem definierten Element abhängen. Dieser Kombinator wählt alle Nachkommen des Elements aus (von untergeordneten Elementen abwärts).

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

Live Demo auf JSBin

Im obigen Beispiel werden die ersten beiden <p> -Elemente ausgewählt, da sie beide Nachkommen von <div> .

Child Combinator: selector > selector

Das Kind ( > ) combinator wird verwendet , um Elemente auszuwählen , die Kinder oder direkte Nachkommen sind, des angegebenen Elements.

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

Live Demo auf JSBin

Das obige CSS wählt nur das erste <p> -Element aus, da es der einzige Absatz ist, der direkt von einem <div> .

Das zweite <p> -Element ist nicht ausgewählt, da es kein direktes <p> Element von <div> .

Angrenzender Geschwister-Kombinator: selector + selector

Der benachbarte Geschwister ( + ) - Kombinator wählt ein Geschwisterelement aus, das unmittelbar auf ein bestimmtes Element folgt.

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

Live Demo auf JSBin

Im obigen Beispiel werden nur die <p> -Elemente ausgewählt, denen ein anderes <p> -Element direkt vorangeht .

General Sibling Combinator: selector ~ selector

Der allgemeine Geschwister ( ~ ) Kombinator wählt alle Geschwister aus, die dem angegebenen Element folgen.

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

Live Demo auf JSBin

Im obigen Beispiel werden alle <p> -Elemente ausgewählt, denen ein anderes <p> -Element vorangeht , unabhängig davon, ob sie unmittelbar nebeneinander liegen oder nicht.

Klassennamen-Selektoren

Der Klassennamenselektor wählt alle Elemente mit dem Zielklassennamen aus. Zum Beispiel würde der Klassenname .warning das folgende <div> -Element auswählen:

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

Sie können Klassennamen auch spezifischer mit Zielelementen kombinieren. Bauen wir auf das obige Beispiel auf, um eine kompliziertere Klassenauswahl zu zeigen.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

In diesem Beispiel haben alle Elemente mit der Klasse .warning eine blaue .important , Elemente mit der .important Klasse mit einer orangefarbenen .important , und alle Elemente, die sowohl den .important Namen als auch die Klasse .important .warning , haben einen roten Text Farbe.

Beachten Sie, dass die Deklaration .warning.important innerhalb des CSS keine Leerzeichen zwischen den beiden Klassennamen hatte. Das bedeutet , es wird nur Elemente finden , die beiden Klassennamen enthalten warning und important in ihrer class Attribute. Diese Klassennamen können sich in beliebiger Reihenfolge auf dem Element befinden.

Wenn zwischen den beiden Klassen in der CSS-Deklaration ein Leerzeichen enthalten ist, werden nur Elemente ausgewählt, die übergeordnete Elemente mit einem .warning Klassennamen und .important Elemente mit .important Klassennamen aufweisen.

ID-Selektoren

ID-Selektoren wählen DOM-Elemente mit der Ziel-ID aus. Um ein Element anhand einer bestimmten ID in CSS auszuwählen, wird das Präfix # verwendet.

Zum Beispiel das folgende HTML-Element div …

<div id="exampleID">
    <p>Example</p>
</div>

… #exampleID in CSS wie #exampleID mit #exampleID ausgewählt werden:

#exampleID {
    width: 20px;
}

Hinweis : Die HTML-Spezifikationen lassen nicht mehrere Elemente mit derselben ID zu

Pseudoklassen

Pseudoklassen sind Schlüsselwörter, die eine Auswahl anhand von Informationen ermöglichen, die außerhalb des Dokumentbaums liegen oder von anderen Selektoren oder Kombinatoren nicht ausgedrückt werden können. Diese Informationen können in einen bestimmten Zustand ( in Verbindung gebracht werden Zustand und dynamische Pseudoklassen), an Orten ( strukturellen und Ziel Pseudo-Klassen), zu Negationen der ehemaligen ( Negation Pseudo-Klasse) oder Sprachen ( lang pseudo-Klasse). Beispiele sind, ob ein Link verfolgt wurde ( :visited ) oder nicht, der Mauszeiger über einem Element ( :hover ) ist, ein Kontrollkästchen ist markiert ( :checked ) usw.

Syntax

selector:pseudo-class { 
    property: value;
}

Liste der Pseudoklassen:

Die :visited Pseudoklasse kann in vielen modernen Browsern nicht mehr zum Stilisieren verwendet werden, da dies eine Sicherheitslücke darstellt. Siehe diesen Link als Referenz.

Grundlegende Selektoren

Hinweis: Der Wert einer ID muss auf einer Webseite eindeutig sein. Es ist eine Verletzung des HTML-Standards , den Wert einer ID mehr als einmal in derselben Dokumentstruktur zu verwenden.

Eine vollständige Liste der Selektoren finden Sie in der Spezifikation von CSS Selectors Level 3 .

So gestalten Sie eine Range-Eingabe

HTML

<input type="range"></input>

CSS

Global boolean mit Checkbox: angehakt und ~ (allgemeiner Geschwister-Kombinator)

Mit dem ~ Selektor können Sie problemlos ein global zugängliches Boolean ohne JavaScript implementieren.

Fügen Sie boolean als Kontrollkästchen hinzu

Fügen Sie ganz am Anfang Ihres Dokuments mit einer eindeutigen id und dem hidden Attributsatz so viele Booleans hinzu, wie Sie möchten:

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

Ändern Sie den Wert des Booleschen Werts

Sie können den Booleschen Wert umschalten, indem Sie eine label mit dem Attribut " for hinzufügen:

<label for="sidebarShown">Show/Hide the sidebar!</label>

Zugriff auf boolesche Werte mit CSS

Die normale .color-red (wie .color-red ) gibt die Standardeigenschaften an. Sie können durch folgende true / false Selektoren überschrieben werden:

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

Beachten Sie, dass <checkbox> , [sibling ...] und <target> durch die richtigen Selektoren ersetzt werden sollten. [sibling ...] kann ein bestimmter Selektor sein (oft, wenn Sie faul sind) * oder nichts, wenn das Ziel bereits ein Bruder des Kontrollkästchens ist.

Beispiele für die obige HTML-Struktur wären:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

In Aktion

Siehe diese Geige für eine Implementierung dieser globalen Booleans.

CSS3: Beispiel für den Bereichsauswahlbereich

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

Die CSS-Pseudoklasse :in-range stimmt überein, wenn ein Wertattribut eines Elements innerhalb der angegebenen Bereichsbeschränkungen für dieses Element liegt. Dadurch kann die Seite eine Rückmeldung geben, dass der aktuell mithilfe des Elements definierte Wert innerhalb der Bereichsgrenzen liegt. [1]

Kind Pseudo-Klasse

Msgstr "Die: nth - child (an + b) - CSS - Pseudoklasse stimmt mit einem Element überein, das in der Dokumentstruktur ein + b - 1 - gleichgeordnetes Element enthält, und zwar für einen bestimmten positiven oder Nullwert für n" - MDN: nth - child

Wählen Sie das Element anhand seiner ID ohne die hohe Spezifität des ID-Selektors aus

Mit diesem Trick können Sie ein Element auswählen, das die ID als Wert für einen Attributselektor verwendet, um die hohe Spezifität des ID-Selektors zu vermeiden.

HTML:

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A. Das: keine Pseudoklassenbeispiel & B.: focus-within CSS-Pseudoklasse

A. Die Syntax ist oben dargestellt.

Der folgende Selektor stimmt mit allen <input> -Elementen in einem HTML-Dokument überein, die nicht deaktiviert sind und keine Klasse haben .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

Die :not() Pseudo-Klasse unterstützt in Selectors Level 4 auch durch Kommas getrennte Selektoren:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Live Demo auf JSBin

Siehe Hintergrundsyntax hier .

B. Die: focus-within CSS-Pseudoklasse

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

Das Beispiel: Nur-Kind-Pseudo-Klassenauswahl

Die :only-child CSS -Pseudoklasse stellt jedes Element dar, das das einzige untergeordnete Element des übergeordneten Elements ist.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS:

p:only-child {
  color: blue;
}

Das obige Beispiel wählt das Element <p> , das das eindeutige <p> Element darstellt, in diesem Fall ein <div> .

Live Demo auf JSBin

Die: letzte Auswahl

Der :last-of-type wählt das Element, das das letzte untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist. In dem folgenden Beispiel wählt die CSS den letzten Absatz und die letzte Überschrift h1 .

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle