Wählen Sie jeden zweiten CSS-Selektor aus. Ereignisse (Selektoren, Verhalten) CSS. Durch Pseudoelemente generierter Inhalt

💖 Gefällt es dir? Teilen Sie den Link mit Ihren Freunden
0

Nicht alle, aber mehr als genug

Menschen, die XHTML und CSS aus Büchern lernen, stellen häufig fest, dass CSS-Ereignisse nicht vollständig beschrieben werden. Insbesondere sind nur Veranstaltungen wie z.B schweben, aktiv, besucht. Es gibt viele weitere CSS-Ereignisse und die Möglichkeiten, die sie bieten, sind sehr groß.

Hier nicht gezeigt volle Liste Events, aber nur solche, die ein moderner Webdesigner wirklich braucht.

Wenn Sie einem Block ein After-Event zuweisen, wird der im Stylesheet definierte generierte Code nach dem Block ausgegeben. Um den Code zu definieren, wird der CSS-Befehl verwendet - Inhalt, dessen Syntax Inhalt ist: „XHTML-Code“.

Diese. Der gesamte Befehl könnte so aussehen:
#someId:after
(Inhalt: „XHTML-Code“) :before Funktioniert genauso wie after, gibt jedoch den Code vor dem Element aus: first-child Legt den Stil für das erste untergeordnete Element eines anderen Elements fest.

Nehmen wir an, dass durch die Anwendung dieses Ereignisses auf das h1-Tag die erste und nur die erste Überschrift der Ebene 1 mit dem entsprechenden Stil gerendert wird. Es ist besonders effektiv, dieses Ereignis für Stile verschachtelter Tags (mehrstufig) zu verwenden, beispielsweise wie folgt:

body ol li:first-child(...)(d. h. in allen ol-Listen wird das erste li-Element, aber nicht das ul, mit den angegebenen Stileinstellungen angezeigt)

:last-child Stilt das letzte untergeordnete Element eines anderen Elements. :focus Legt den Stil für Formularelemente fest, die den Fokus erhalten, d. h. diejenigen, auf die Sie klicken. Beispielsweise können Sie das aktive Texteingabefeld vom inaktiven Texteingabefeld unterscheiden. :hover Stil für das Element, über das der Mauszeiger bewegt wird. Kann mit allen Blöcken und Texten verwendet werden (bisher haben wir nur Links berücksichtigt). :lang( X) Weist ein Element einer bestimmten Sprache zu, ohne den Inhalt des Elements in irgendeiner Weise zu ändern. Dieser Tag kann beispielsweise verwendet werden, um Links zu verschiedenen Quellen hervorzuheben. Anstatt X Es wird eine zweistellige internationale Bezeichnung der Sprache, also der Name, platziert Domänenzone. Für Russland ist es zum Beispiel so ru, für Amerika uns, usw. Wenn ein Element mehrere Sprachen gleichzeitig definieren muss, müssen diese durch einen Bindestrich ohne Leerzeichen getrennt werden (in der Reihenfolge der absteigenden Bedeutung der Stile, die jede Sprache definiert). :visited Legt den Stil eines besuchten Links fest:nth-child(x) Legt den Stil für bestimmte Elemente oder ein bestimmtes Element fest. x kann ausgedrückt werden:

  • Nummer. In diesem Fall wird nur 1 Element ausgewählt
  • Ausdrücke ungerade (alle ungeraden Elemente) oder gerade (alle gerade Elemente).
  • Ausdruck an+b, wobei sich n nicht ändert, a und b beliebige Zahlen sind. Zum Beispiel 7n+4. Alle Elemente, die bei Division durch 7 einen Rest von 4 ergeben, werden ausgewählt (4, 11, 18 usw.). Wenn a oder b in diesem Fall gleich 0 sind, können sie weggelassen werden. Die n Elemente werden von 0 bis n-1 gezählt
Aufmerksamkeit! Dieses Verhalten (Selektor) gibt es nur im neuen CSS 3-Standard und wird nur von modernen Browsern unterstützt. :nth-last-child(x) Dasselbe wie nth-child(x), zählt aber vom letzten n-1 Element bis 0. :emply Fügt einen Stil zu einem Element hinzu, das keine untergeordneten Elemente hat, d. h. zu einem leeren Tag. :enabled Stil für das ausgewählte, aktivierte Formularelement. Nur für Button-, Input-, Optgroup-, Option-, Select- und Textarea-Elemente. Dieser und die beiden folgenden Selektoren sind nur in CSS 3 verfügbar:disabled Dasselbe wie aktiviert, aber für nicht aktivierte Formularelemente:checked Nur für Radio und Checkbox. Legt den Stil für die ausgewählten Elemente fest. :first-letter Legt den Stil für den ersten Buchstaben im Text fest (die sogenannte Initiale). Es werden nur Befehle unterstützt CSS-Styling, aber keine Markierungen. :first-line Das Gleiche, aber für die erste Textzeile.

Tauchen Sie tief in die CSS-Selektoren ein

Die oben beschriebenen Materialien werden für viele ausreichen, aber nicht für jeden. Auf den Websites großer Unternehmen, öffentlicher Projekte, soziale Netzwerke Es werden sehr komplexe CSS-Selektoren verwendet und manchmal reicht die oben beschriebene Funktionalität nicht aus. Darüber hinaus muss CSS mit serverseitigen Programmiersprachen interagieren, d. h. Oft wird CSS für bestimmte Seiten automatisch generiert. Gleichzeitig muss es korrekt und korrekt funktionieren.

Wir haben die Vererbung von Elementen erwähnt. Jetzt werden wir es genauer analysieren.

CSS kann Regeln definieren für verschiedene Arten Vererbung oder die Zugehörigkeit von Elementen zu einem übergeordneten Element. Alle dienen nur dazu, Elemente auszuwählen, auf die die Regel angewendet wird.

Kombinatoren (Herstellung einer Verbindung zwischen Stilen basierend auf Vererbung)
Benachbartes Geschwisterkind (+) Dieser Kombinator definiert zwei Elemente, die unmittelbar aufeinander folgen (es gibt zwischen ihnen keine anderen Elemente mit demselben übergeordneten Element wie diese beiden Elemente, aber es kann Elemente geben, die sie erben) und dasselbe übergeordnete Element haben. Der Stil wird auf beide Elemente gleichzeitig angewendet. Aufnahmesyntax (Leerzeichen sind nicht enthalten)
E+F(...)
wobei E das erste Element und F das zweite Element ist. Zum Beispiel,
h1+h2(Schriftfamilie:Serif)
Dieser Eintrag definiert den Stil nur für aufeinanderfolgende h1- und h2-Elemente, die dasselbe übergeordnete Element haben. Wenn nach h2 ein weiterer h2-Tag steht, wird der Stil nicht darauf angewendet.
Kind (>) Kombinator Der Kombinator identifiziert alle Elemente, die direkte Nachkommen eines Elements sind. Unterstützt mehrere Verschachtelungsebenen, zum Beispiel:
Körper > div > p(...)
Das heißt, der Stil wird nur auf Absätze angewendet, die untergeordnete Elemente aller Divs sind, die direkt zum Body-Tag gehören.
Nachfahre Definiert eine beliebige Verbindung zwischen Elementen. Das heißt, Elemente sollten keine direkten Nachkommen sein, sondern lediglich Nachkommen eines Elements. Syntax (Platzbedarf):
E F(...)
Zum Beispiel:
table.table1 td(...)
Das heißt, der Stil wird in allen untergeordneten Spalten der Tabelle mit der Klasse table1 definiert, auch wenn andere Tabellen in dieser Tabelle vorhanden sind. Der Stil wird auch auf die Spalten der untergeordneten Tabellen angewendet.
Allgemeines Geschwister (~) Syntax E~F. Der Kombinator erfüllt die gleiche Funktion wie Adjacent Sibling, außer dass es zwischen E und F eine beliebige Anzahl von Elementen derselben Verschachtelungsebene und mehr als ein F geben kann.
Attribute. Attributselektoren. Erstellen Sie Ihre eigenen Attribute
Gleichheit [=] Jedes Tag kann ein Attribut haben (z. B. ein ID-Attribut, das fast jedes Tag haben kann, oder ein Breitenattribut (nur für Blöcke)). Sie können Ihr eigenes Attribut erstellen, bei dem es sich um eine Textzeichenfolge handelt. Zum Beispiel attr. Das Erstellen eigener Attribute ist für Attributselektoren in CSS nützlich. Attribute können in Verbindung mit Kombinatoren verwendet werden.
Gleichheit gibt den Stil für alle Elemente an, deren angegebenes Attribut genau dem angegebenen Wert entspricht. Syntax:
{...}
Wie Sie sehen, sind hier keine Tags definiert. Stile werden für alle Elemente definiert, die das Attribut haben att gleich dem Wert val. Att und val können Bezeichnerwerte (für att können beispielsweise alle erlernten Attribute vorhanden sein, für val keine, Block usw.) und String-Werte annehmen, d. h. nur ein Wort (z. B. definiert alle Elemente mit dem Eintrag<... attr="test" ...="">).
Existenz Identifiziert alle Elemente, die ein Attribut haben, unabhängig von seinem Wert. Syntax:
{...}
att – Attribut (oder String-Wert, d. h. ein eigenes Attribut)
Präfix [^=] Definiert Elemente, die über ein att-Attribut verfügen, das einen Wert annimmt, der mit val beginnt. Syntax:
{...}
att – Attribut (oder String-Wert, d. h. sein eigenes Attribut), val – Attributwert
Ein sehr gutes Beispiel: Wikipedia. Auf dieser Website sind alle Links, die zu anderen Websites als Wikipedia führen, mit einem Symbol (Pfeil) versehen. Hier ist eine Beispielaufnahme, mit der Sie diesen Stil schreiben können:
:after(Inhalt" "}
Suffix [$=] Definiert Elemente, die über ein att-Attribut verfügen, das einen Wert annimmt, der auf val endet. Syntax
{...}
Dieses Attribut wird seit Kurzem dazu verwendet, Bilder vor verschiedenen Links zu platzieren, die dem Benutzer visuell anzeigen, an welche Datei oder Seite der Link ihn weiterleitet. Zum Beispiel vor Links zu PDF-Dateien Sie können ein PDF-Symbol einfügen. Beispiel:
:before(content:" "}
Teilzeichenfolge [*=] Aufnahmesyntax:
{...}
Wählt alle Elemente mit dem att-Attribut aus, deren Wert den Teilstring val enthält. „54“ ist beispielsweise die Teilzeichenfolge „132 54 6“, „val“ – Teilzeichenfolge „value“ usw.
Leerzeichen [~=] Whitespace ist dasselbe wie Substring, allerdings muss der Substring ein Wort sein, d. h. in der Zeichenfolge von Leerzeichen umgeben.
Bindestrich [|=] Identisch mit Teilzeichenfolge, außer dass die Teilzeichenfolge Teil des Attributs sein und durch einen Bindestrich von den anderen Teilen getrennt werden muss. Beispiel:
{...}
wählt alle Tags mit dem lang-Attribut aus, deren Wert en enthält, zum Beispiel en-ru, ru-de-en usw.

Damit ist die Untersuchung von XHTML+CSS abgeschlossen. In den nächsten Lektionen geht es um JavaScript.

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der Sie strukturierten Dokumenten (z. B. HTML-Dokumenten und XML-Anwendungen) Stile (z. B. Schriftarten und Farben) hinzufügen können. Typischerweise werden CSS-Stile verwendet, um den Stil von darin geschriebenen Elementen von Webseiten und Benutzeroberflächen zu erstellen und zu ändern HTML-Sprachen und XHTML, kann aber auch auf jede Art von XML-Dokument angewendet werden, einschließlich XML, SVG und XUL. Durch die Trennung des Dokumentpräsentationsstils vom Dokumentinhalt erleichtert CSS die Erstellung von Webseiten und die Pflege von Websites.

CSS unterstützt medienspezifische Stylesheets, sodass Autoren die Präsentation ihrer Dokumente an visuelle Browser, Hörgeräte, Drucker, Braillegeräte, Handheld-Geräte und mehr anpassen können.

Cascading Style Sheets beschreiben Regeln für die Formatierung von Elementen mithilfe von Eigenschaften und den zulässigen Werten für diese Eigenschaften. Für jedes Element können Sie eine begrenzte Menge an Eigenschaften verwenden; andere Eigenschaften haben keine Auswirkung darauf.

Eine Stildeklaration besteht aus zwei Teilen: Wähler Und Anzeigen. In HTML wird bei Elementnamen die Groß-/Kleinschreibung nicht beachtet, daher funktioniert „h1“ genauso wie „H1“. Die Deklaration besteht aus zwei Teilen: dem Eigenschaftsnamen (z. B. Farbe) und dem Eigenschaftswert (Grau). Der Selektor teilt dem Browser mit, welches Element formatiert werden soll, und der Deklarationsblock (Code in geschweiften Klammern) listet die Formatierungsbefehle – Eigenschaften und ihre Werte – auf.

Reis. 1. Anzeigenstruktur

Obwohl das bereitgestellte Beispiel nur versucht, einige Eigenschaften zu beeinflussen, die zum Rendern eines HTML-Dokuments erforderlich sind, gilt es als eigenständiges Stylesheet. In Kombination mit anderen Stylesheets (ein grundlegendes Merkmal von CSS besteht darin, dass Stylesheets kombiniert werden) bestimmt die Regel die endgültige Darstellung des Dokuments.

Arten von Cascading Style Sheets und ihre Besonderheiten

1. Arten von Stylesheets

1.1. Externes Stylesheet

Externes Stylesheet repräsentiert Textdatei mit der Erweiterung .css, die eine Reihe von CSS-Stilen für Elemente enthält. Die Datei wird in einem Code-Editor erstellt, genau wie eine HTML-Seite. Die Datei kann nur Stile ohne HTML-Markup enthalten. Ein externes Stylesheet wird über ein Tag mit einer Webseite verbunden , befindet sich innerhalb des Abschnitts . Diese Stile funktionieren für alle Seiten der Website.

Sie können jeder Webseite mehrere Stylesheets hinzufügen, indem Sie mehrere Tags nacheinander hinzufügen , was den Zweck dieses Stylesheets im Medien-Tag-Attribut angibt. rel="stylesheet" gibt die Art des Links an (Link zu einem Stylesheet).

Das Attribut type="text/css" ist im HTML5-Standard nicht erforderlich und kann daher weggelassen werden. Wenn das Attribut fehlt, ist der Standardwert type="text/css" .

1.2. Interne Stile

Interne Stile in einen Abschnitt eingebettet HTML-Dokument und werden innerhalb des Tags definiert. Interne Stile haben Vorrang vor externen, sind jedoch den Inline-Stilen (angegeben über das style-Attribut) unterlegen.

...

1.3. Integrierte Stile

Wenn wir schreiben Inline-Stile, schreiben wir den CSS-Code in die HTML-Datei, direkt in das Element-Tag, indem wir das style-Attribut verwenden:

Achten Sie auf diesen Text.

Solche Stile wirken sich nur auf das Element aus, für das sie festgelegt sind.

1.4. @import-Regel

@import-Regel Ermöglicht das Laden externer Stylesheets. Damit die @import-Direktive funktioniert, muss sie im Stylesheet (extern oder intern) vor allen anderen Regeln erscheinen:

Die @import-Regel wird auch zum Einbinden von Webfonts verwendet:

@import-URL (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Arten von Selektoren

Selektoren stellen die Struktur einer Webseite dar. Sie helfen bei der Erstellung von Regeln für die Formatierung von Webseitenelementen. Selektoren können Elemente, deren Klassen und Bezeichner sowie Pseudoklassen und Pseudoelemente sein.

2.1. Universeller Selektor

Entspricht jedem HTML-Element. Mit * (margin: 0;) werden beispielsweise die Ränder für alle Site-Elemente zurückgesetzt. Der Selektor kann auch in Kombination mit einer Pseudoklasse oder einem Pseudoelement verwendet werden: *:after (CSS-Stile) , *:checked (CSS-Stile) .

2.2. Elementauswahl

Mit Elementselektoren können Sie alle Elemente formatieren dieser Art auf allen Seiten der Website. Beispielsweise legt h1 (Schriftfamilie: Lobster, cursive;) den allgemeinen Formatierungsstil für alle h1-Überschriften fest.

2.3. Klassenauswahl

Mit Klassenselektoren können Sie Stile für ein oder mehrere Elemente mit demselben Klassennamen angeben, die an verschiedenen Stellen auf der Seite oder auf platziert werden verschiedene Seiten Website. Um beispielsweise einen Titel mit der Überschrift „class“ zu erstellen, müssen Sie das Attribut „class“ mit dem Wert „headline“ zum öffnenden Tag hinzufügen

und legen Sie den Stil für die angegebene Klasse fest. Mit einer Klasse erstellte Stile können auf andere Elemente angewendet werden, die nicht unbedingt diesem Typ angehören.

.headline ( Texttransformation: Großbuchstaben; Farbe: Hellblau; )

Wenn ein Element über mehrere Klassenattribute verfügt, werden deren Werte mit Leerzeichen verkettet.

Anweisungen zur Verwendung eines Personalcomputers

2.4. ID-Auswahl

Mit der ID-Auswahl können Sie formatieren eins spezifisches Element. Der ID-Wert muss eindeutig sein, darf nur einmal auf einer einzelnen Seite vorkommen und muss mindestens ein Zeichen enthalten. Der Wert darf keine Leerzeichen enthalten.

Es gibt keine weiteren Einschränkungen hinsichtlich der Form der ID; insbesondere können Bezeichner alle Zahlen sein, mit einer Zahl beginnen, mit einem Unterstrich beginnen, nur Satzzeichen enthalten usw.

Die eindeutige ID eines Elements kann für verschiedene Zwecke verwendet werden, unter anderem als Möglichkeit, mithilfe von Fragment-IDs auf bestimmte Teile eines Dokuments zu verweisen, als Möglichkeit, bei der Skripterstellung auf ein Element abzuzielen, und als Möglichkeit, ein bestimmtes Element über CSS zu formatieren .

#sidebar ( width: 300px; float: left; )

2.5. Nachkommenselektor

Nachkommenselektoren wenden Stile auf Elemente innerhalb eines Containerelements an. Beispielsweise wählt ul li (text-transform: Uppercase;) alle li-Elemente aus, die untergeordnete Elemente aller ul-Elemente sind.

Wenn Sie die Nachkommen eines bestimmten Elements formatieren möchten, müssen Sie diesem Element eine Stilklasse zuweisen:

p.first a (Farbe: grün;) – dieser Stil wird auf alle Links angewendet, die vom Absatz mit der ersten Klasse abgeleitet sind;

p .first a (Farbe: grün;) – Wenn Sie ein Leerzeichen hinzufügen, werden Links, die sich innerhalb eines .first-Klassentags befinden, das ein untergeordnetes Element des Elements ist, formatiert

First a (Farbe: grün;) – dieser Stil wird auf jeden Link angewendet, der sich innerhalb eines anderen Elements befindet, das durch class.first bezeichnet wird.

2.6. Kinderauswahl

Ein untergeordnetes Element ist ein direktes untergeordnetes Element seines enthaltenden Elements. Ein Element kann mehrere untergeordnete Elemente haben, aber jedes Element kann nur ein übergeordnetes Element haben. Mit der untergeordneten Auswahl können Sie Stile nur anwenden, wenn das untergeordnete Element unmittelbar nach dem übergeordneten Element steht und keine anderen Elemente dazwischen liegen, d. h. das untergeordnete Element ist in nichts anderem verschachtelt.
Beispielsweise wählt p > strong alle starken Elemente aus, die untergeordnete Elemente des p-Elements sind.

2.7. Schwesterauswahl

Schwesternschaft entsteht zwischen Elementen, die ein gemeinsames Elternteil haben. Mit Geschwisterselektoren können Sie Elemente aus einer Gruppe von Elementen derselben Ebene auswählen.

h1 + p – wählt alle ersten Absätze aus, die unmittelbar auf ein beliebiges Tag folgen

ohne Auswirkungen auf die übrigen Absätze;

h1 ~ p – wählt alle Absätze aus, die Schwesterabsätze einer h1-Überschrift sind und unmittelbar darauf folgen.

2.8. Attributauswahl

Attributselektoren wählen Elemente basierend auf dem Attributnamen oder Attributwert aus:

[Attribut] – alle Elemente, die das angegebene Attribut enthalten – alle Elemente, für die das Alt-Attribut angegeben ist;

selector[attribute] – Elemente dieses Typs, die das angegebene Attribut enthalten, img – nur Bilder, für die das alt-Attribut angegeben ist;

selector[attribute="value"] – Elemente dieses Typs, die das angegebene Attribut mit einem bestimmten Wert enthalten, img – alle Bilder, deren Titel das Wort Blume enthält;

selector[attribute~="value"] – Elemente, die teilweise einen bestimmten Wert enthalten, wenn beispielsweise mehrere Klassen für ein Element angegeben sind, getrennt durch ein Leerzeichen, p – Absätze, deren Klassenname feature enthält;

selector[attribute|="value"] – Elemente, deren Liste von Attributwerten mit dem angegebenen Wort beginnt, p – Absätze, deren Klassenname feature ist oder mit feature beginnt;

selector[attribute^="value"] – Elemente, deren Attributwert mit dem angegebenen Wert beginnt, a – alle Links, die mit http:// beginnen;

selector[attribute$="value"] – Elemente, deren Attributwert mit dem angegebenen Wert endet, img – alle Bilder im PNG-Format;

selector[attribute*="value"] – Elemente, deren Attributwert das angegebene Wort an einer beliebigen Stelle enthält, a – alle Links, deren Name book enthält.

2.9. Pseudoklassenselektor

Pseudoklassen sind Klassen, die nicht wirklich an HTML-Tags angehängt sind. Sie ermöglichen es Ihnen, CSS-Regeln auf Elemente anzuwenden, wenn ein Ereignis eintritt oder einer bestimmten Regel gehorcht. Pseudoklassen charakterisieren Elemente mit folgenden Eigenschaften:

:hover – jedes Element, über dem sich der Mauszeiger befindet;

:focus – ein interaktives Element, zu dem mit der Tastatur navigiert oder mit der Maus aktiviert wurde;

:active – Element, das vom Benutzer aktiviert wurde;

:valid – Formularfelder, deren Inhalt im Browser auf Übereinstimmung mit dem angegebenen Datentyp überprüft wurde;

:invalid – Formularfelder, deren Inhalt nicht mit dem angegebenen Datentyp übereinstimmt;

:enabled – alle aktiven Formularfelder;

:disabled – blockierte Formularfelder, d. h. in einem inaktiven Zustand;

:in-range – Formularfelder, deren Werte im angegebenen Bereich liegen;

:out-of-range – Formularfelder, deren Werte nicht innerhalb des angegebenen Bereichs liegen;

:lang() – Elemente mit Text in der angegebenen Sprache;

:not(selector) – Elemente, die den angegebenen Selektor nicht enthalten – Klasse, Bezeichner, Name oder Formularfeldtyp – :not() ;

:target ist ein Element mit dem #-Symbol, auf das im Dokument verwiesen wird;

:checked – ausgewählte (vom Benutzer ausgewählte) Formularelemente.

2.10. Struktureller Pseudoklassenselektor

Strukturelle Pseudoklassen wählen untergeordnete Elemente gemäß dem in Klammern angegebenen Parameter aus:

:nth-child(odd) – ungerade untergeordnete Elemente;

:nth-child(even) – gerade untergeordnete Elemente;

:nth-child(3n) – jedes dritte Element unter den Kindern;

:nth-child(3n+2) – wählt jedes dritte Element aus, beginnend mit dem zweiten Kind (+2);

:nth-child(n+2) – wählt alle Elemente ab dem zweiten aus;

:nth-child(3) – wählt das dritte untergeordnete Element aus;

:nth-last-child() – wählt in der Liste der untergeordneten Elemente das Element mit der angegebenen Position aus, ähnlich wie :nth-child() , jedoch beginnend beim letzten, in der entgegengesetzten Richtung;

:first-child – ermöglicht Ihnen, nur das allererste untergeordnete Element des Tags zu formatieren;

:last-child – ermöglicht die Formatierung des letzten untergeordneten Elements des Tags;

:only-child – wählt ein Element aus, das das einzige untergeordnete Element ist;

:empty – wählt Elemente aus, die keine untergeordneten Elemente haben;

:root – wählt das Element aus, das das Stammverzeichnis des Dokuments ist – das HTML-Element.

2.11. Pseudoklassenselektor für Strukturtypen

Zeigt einen bestimmten Typ eines untergeordneten Tags an:

:nth-of-type() – wählt Elemente ähnlich wie :nth-child() aus, berücksichtigt jedoch nur den Typ des Elements;

:first-of-type – wählt das erste untergeordnete Element eines bestimmten Typs aus;

:last-of-type – wählt das letzte Element dieses Typs aus;

:nth-last-of-type() – wählt ein Element des angegebenen Typs in einer Liste von Elementen entsprechend der angegebenen Position aus, beginnend am Ende;

:only-of-type – wählt ein einzelnes Element aus angegebenen Typ unter untergeordneten Elementen übergeordnetes Element.

2.12. Pseudoelementselektor

Pseudoelemente werden zum Hinzufügen von Inhalten verwendet, die mithilfe der Content-Eigenschaft generiert werden:

:first-letter – wählt den ersten Buchstaben jedes Absatzes aus, gilt nur für Blockelemente;

:first-line – wählt die erste Zeile des Elementtextes aus, gilt nur für Blockelemente;

:before – fügt generierten Inhalt vor dem Element ein;

:after – fügt generierten Inhalt nach dem Element hinzu.

3. Wahlkombination

Um Elemente für die Formatierung genauer auszuwählen, können Sie Kombinationen von Selektoren verwenden:

img:nth-of-type(even) – wählt alle geraden Bilder aus, alternativer Text was beinhaltet Wort-CSS.

4. Gruppierungsselektoren

Derselbe Stil kann auf mehrere Elemente gleichzeitig angewendet werden. Dazu müssen Sie die erforderlichen Selektoren auf der linken Seite der Deklaration durch Kommas getrennt auflisten:

H1, h2, p, span (Farbe: Tomate; Hintergrund: Weiß;)

5. Vererbung und Kaskade

Vererbung und Kaskade sind zwei grundlegende Konzepte in CSS, die eng miteinander verbunden sind. Bei der Vererbung erben Elemente Eigenschaften von ihrem übergeordneten Element (dem Element, das sie enthält). Die Kaskade manifestiert sich darin, wie verschiedene Typen Welche Stylesheets auf ein Dokument angewendet werden und wie sich widersprüchliche Regeln gegenseitig überschreiben.

5.1. Nachlass

Nachlass ist der Mechanismus, durch den bestimmte Eigenschaften von einem Vorfahren an seine Nachkommen weitergegeben werden. Die CSS-Spezifikation ermöglicht die Vererbung von Eigenschaften, die sich auf den Textinhalt der Seite beziehen, wie z. B. Farbe, Schriftart, Buchstabenabstand, Zeilenhöhe, Listenstil, Textausrichtung, Texteinzug, Texttransformation, Sichtbarkeit, Weiß -Leerzeichen und Wortabstand. In vielen Fällen ist dies praktisch, da Sie nicht für jedes Element auf der Webseite die Schriftgröße und die Schriftfamilie festlegen müssen.

Eigenschaften im Zusammenhang mit der Blockformatierung werden nicht vererbt. Dies sind Hintergrund, Rand, Anzeige, Float und Clear, Höhe und Breite, Rand, Min-Max-Höhe und -Breite, Umriss, Überlauf, Polsterung, Position, Textdekoration, vertikale Ausrichtung und Z-Index.

Zwangsvererbung

Sie können das Schlüsselwort inherit verwenden, um ein Element zu zwingen, einen beliebigen Eigenschaftswert seines übergeordneten Elements zu erben. Dies funktioniert auch für Eigenschaften, die nicht standardmäßig geerbt werden.

Wie CSS-Stile festgelegt werden und funktionieren

1) Stile können vom übergeordneten Element geerbt werden (geerbte Eigenschaften oder Verwendung des inherit-Werts);

2) Stile im Stylesheet unten überschreiben Stile in der Tabelle oben;

3) Stile aus verschiedenen Quellen können auf ein Element angewendet werden. Sie können im Browser-Entwicklermodus überprüfen, welche Stile angewendet werden. Klicken Sie dazu mit der rechten Maustaste auf das Element und wählen Sie „Code anzeigen“ (oder etwas Ähnliches). In der rechten Spalte werden alle Eigenschaften aufgelistet, die für dieses Element festgelegt oder von einem übergeordneten Element geerbt wurden, zusammen mit den Stildateien, in denen sie angegeben sind, und der Ordnungszahl der Codezeile.


Reis. 2. Entwicklermodus in Google-Browser Chrom

4) Beim Definieren eines Stils können Sie eine beliebige Kombination von Selektoren verwenden – einen Elementselektor, eine Elementpseudoklasse, eine Klasse oder einen Elementbezeichner.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: Both;)

5.2. Kaskade

Kaskadierung ist ein Mechanismus, der das Endergebnis steuert, wenn unterschiedliche CSS-Regeln auf dasselbe Element angewendet werden. Es gibt drei Kriterien, die die Reihenfolge bestimmen, in der Eigenschaften angewendet werden: die wichtige Regel, die Spezifität und die Reihenfolge, in der Stylesheets enthalten sind.

Regel!wichtig

Die Gewichtung einer Regel kann mit dem Schlüsselwort!important angegeben werden, das direkt nach dem Eigenschaftswert hinzugefügt wird, zum Beispiel span (font-weight: Bold!important;) . Die Regel muss am Ende der Deklaration vor der schließenden Klammer ohne Leerzeichen stehen. Eine solche Ankündigung hat Vorrang vor allen anderen Regeln. Mit dieser Regel können Sie einen Eigenschaftswert löschen und einen neuen für ein Element aus einer Gruppe von Elementen festlegen, wenn kein direkter Zugriff auf die Stildatei besteht.

Spezifität

Für jede Regel berechnet der Browser Selektorspezifität, und wenn ein Element widersprüchliche Eigenschaftsdeklarationen aufweist, wird die Regel mit der höchsten Spezifität berücksichtigt. Der Spezifitätswert besteht aus vier Teilen: 0, 0, 0, 0. Die Selektorspezifität ist wie folgt definiert:

für id wird 0, 1, 0, 0 hinzugefügt;
für Klasse 0 wird 0, 1, 0 hinzugefügt;
für jedes Element und Pseudoelement wird 0, 0, 0, 1 hinzugefügt;
für einen Inline-Stil, der direkt einem Element hinzugefügt wird – 1, 0, 0, 0 ;
Ein universeller Selektor hat keine Spezifität.

H1 (Farbe: hellblau;) /*Spezifität 0, 0, 0, 1*/ em (Farbe: silber;) /*Spezifität 0, 0, 0, 1*/ h1 em (Farbe: gold;) /*Spezifität: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (Farbe: blau;) /*Spezifität: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (Farbe: grau;) /*Spezifität 0, 0, 1, 0 */ #sidebar (Farbe: orange;) /*Spezifität 0, 1, 0, 0*/ li#sidebar (Farbe: Aqua;) /*Spezifität: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Dadurch werden die spezifischeren Regeln auf das Element angewendet. Wenn ein Element beispielsweise zwei Spezifitäten mit den Werten 0, 0, 0, 2 und 0, 1, 0, 1 aufweist, gewinnt die zweite Regel.

Reihenfolge der verbundenen Tabellen

Sie können mehrere externe Stylesheets erstellen und diese mit einer Webseite verbinden. Wenn drin verschiedene Tische werden Treffen unterschiedliche Bedeutungen Eigenschaften eines Elements, dann wird als Ergebnis die Regel im unten aufgeführten Stylesheet auf das Element angewendet.

CSS-Selektoren Definieren Sie die Elemente, für die eine Reihe von CSS-Regeln gelten.

Grundlegende Selektoren

Universeller Selektor Wählt alle Elemente aus. Optional kann es auf einen bestimmten Namensraum oder auf alle Namensräume beschränkt werden.
Syntax:* k. A. |* *|*
Beispiel:* stimmt mit allen Elementen des Dokuments überein. Typselektor Wählt alle Elemente aus, die den angegebenen Knotennamen haben.
Syntax: Elementname
Beispiel: Die Eingabe stimmt mit jedem Element überein und wird zum Erstellen interaktiver Steuerelemente für webbasierte Formulare verwendet, um Daten vom Benutzer zu akzeptieren. Je nach Gerät und Benutzeragent stehen verschiedenste Arten von Eingabedaten und Steuerungs-Widgets zur Verfügung. "> Element. Klassenselektor Wählt alle Elemente aus, die das angegebene Klassenattribut haben.
Syntax:. Klassenname
Beispiel:.index stimmt mit jedem Element überein, das die Klasse „index“ hat. ID-Selektor Wählt ein Element basierend auf dem Wert seines ID-Attributs aus. In einem Dokument sollte es nur ein Element mit einer bestimmten ID geben.
Syntax:# ID-Name
Beispiel:#toc entspricht dem Element mit der ID „toc“. Attributselektor Wählt alle Elemente aus, die das angegebene Attribut haben.
Syntax:[ attr ] [ attr = Wert ] [ attr ~= Wert ] [ attr |= Wert ] [ attr ^= Wert ] [ attr $= Wert ] [ attr *= Wert ]
Beispiel: stimmt mit allen Elementen überein, für die das Autoplay-Attribut festgelegt ist (auf einen beliebigen Wert).

Gruppierungsselektoren

Auswahlliste Die , ist eine Gruppierungsmethode, sie wählt alle übereinstimmenden Knoten aus.
Syntax: A, B
Beispiel: div, span stimmen mit beiden überein und ) ist der generische Container für Flow-Inhalte. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es mit CSS gestaltet wird
Elemente.

Kombinatoren

Nachkommen-Kombinator Der (Leerzeichen-)Kombinator wählt Knoten aus, die Nachkommen des ersten Elements sind.
Syntax: A B
Beispiel: div span stimmt mit allen Elementen überein, die sich in a befinden. ) ist der generische Container für Flow-Inhalte. Es hat keine Auswirkung auf den Inhalt oder das Layout, bis es mit CSS gestaltet wird
Element. Untergeordneter Kombinator Der >-Kombinator wählt Knoten aus, die direkte untergeordnete Elemente des ersten Elements sind.
Syntax: A>B
Beispiel: ul > li stimmt mit allen Elementen überein, die zur Darstellung eines Elements in einer Liste verwendet werden
  • Elemente, die direkt in einem Element verschachtelt sind, stellen eine ungeordnete Liste von Elementen dar, die normalerweise als Liste mit Aufzählungszeichen dargestellt wird
      Element. Allgemeiner Geschwisterkombinator Der ~-Kombinator wählt Geschwister aus. Das bedeutet, dass das zweite Element auf das erste folgt (wenn auch nicht unbedingt unmittelbar) und beide dasselbe übergeordnete Element haben.
      Syntax: A~B
      Beispiel: p ~ span stimmt mit allen Elementen überein, die auf ein Element folgen, das einen Absatz darstellt

      , sofort oder nicht. Kombinator für benachbarte Geschwister Der +-Kombinator wählt benachbarte Geschwister aus. Das bedeutet, dass das zweite Element direkt auf das erste folgt und beide dasselbe übergeordnete Element haben.
      Syntax: A+B
      Beispiel: h2 + p stimmt mit allen Elementen überein, die einen Absatz darstellen

      Elemente, die direkt auf ein folgen

      . Spaltenkombinator Das || Der Kombinator wählt Knoten aus, die zu einer Spalte gehören.
      Syntax: Ein || B
      Beispiel: col || td stimmt mit allen Elementen überein, die eine Zelle einer Tabelle definieren, die Daten enthält. Es nimmt am Tabellenmodell teil Elemente, die zum Gültigkeitsbereich des Elements gehören, definieren eine Spalte innerhalb einer Tabelle und werden zum Definieren einer gemeinsamen Semantik für alle gemeinsamen Zellen verwendet. Es wird im Allgemeinen innerhalb von a gefunden Element."> .

      Pseudo

      Pseudoklassen: Pseudo ermöglichen die Auswahl von Elementen basierend auf Statusinformationen, die nicht im Dokumentbaum enthalten sind.
      Beispiel: a:visited stimmt mit allen Elementen (oder Ankerelementen) überein und erstellt mit seinem href-Attribut einen Hyperlink zu Webseiten, Dateien, E-Mail-Adressen, Orten auf derselben Seite oder allem anderen, was eine URL ansprechen kann vom Benutzer besucht. Pseudoelemente The::pseudo stellen Entitäten dar, die nicht in HTML enthalten sind.
      Beispiel: p::first-line entspricht der ersten Zeile aller Elemente, die einen Absatz darstellen

      Elemente.

      Spezifikationen

      Spezifikation Status Kommentar

      Selektoren sind einer, wenn nicht der wichtigste Teil von CSS. Sie bilden eine Kaskade und definieren, wie Stile auf Seitenelemente angewendet werden sollen.

      Bis vor Kurzem lag der Fokus von CSS nie wirklich auf Selektoren. Von Zeit zu Zeit aufgetaucht kleine Updates innerhalb der Selektorenspezifikation, aber es gab nie wirklich bahnbrechende Verbesserungen. Zum Glück in In letzter Zeit Den Selektoren wird immer mehr Aufmerksamkeit geschenkt, also werfen wir einen Blick darauf, wie man eine Auswahl trifft verschiedene Typen Elemente und Elemente in verschiedenen Zuständen.

      CSS3 brachte neue Selektoren und eröffnete ein Ganzes neue Welt Möglichkeiten und Verbesserungen bestehender Praktiken. Hier besprechen wir sowohl alte als auch neue Selektoren und wie man sie am besten nutzt.

      Typische Selektoren

      Bevor wir uns eingehend mit einigen der komplexeren und in CSS3 angebotenen Selektoren befassen, werfen wir einen Blick auf einige der heute am häufigsten verfügbaren Selektoren. Zu diesen Selektoren gehören Typ-, Klassen- und Bezeichnerselektoren.

      Wähler Typ Identifiziert ein Element anhand seines Typs, insbesondere anhand der Art und Weise, wie das Element in HTML deklariert wird. Wähler Klasse Identifiziert ein Element basierend auf dem Wert des Klassenattributs, das bei Bedarf erneut auf mehrere Elemente angewendet werden kann und dabei hilft, beliebte Stile zu teilen. Und endlich, Identifikator Definiert ein Element basierend auf dem Wert des ID-Attributs, das eindeutig ist und nur einmal auf einer Seite verwendet werden sollte.

      H1 (...).Tagline (...) #intro (...)

      Untergeordnete Selektoren

      Untergeordnete Selektoren bieten eine Möglichkeit, ineinander verschachtelte Elemente auszuwählen und sie so zu Kindern ihres übergeordneten Elements zu machen. Diese Auswahl kann auf zwei verschiedene Arten erfolgen, mit einem untergeordneten Selektor oder einem direkten untergeordneten Selektor.

      Nachkommenselektor

      Der gebräuchlichste untergeordnete Selektor ist der Nachkommenselektor, der jedes Element abgleicht, das auf einen bestimmten Vorfahren folgt. Das untergeordnete Element muss im Dokumentbaum nicht unmittelbar nach dem Vorfahren stehen, wie bei einer Eltern-Kind-Beziehung, sondern kann sich an einer beliebigen Stelle innerhalb des Vorfahren befinden. Nachkommen-Selektoren werden durch Leerzeichen zwischen den einzelnen Elementen im Selektor erstellt, wodurch für jedes Element in der Liste eine neue Hierarchieebene entsteht.

      Der Artikel-H2-Selektor ist ein Nachkommen-Selektor und wählt nur Elemente aus

      , die sich innerhalb des Elements befinden
      . Bitte beachten Sie, egal wo das Element lebt

      während es sich innerhalb des Elements befindet
      , es wird immer ausgewählt. Darüber hinaus jedes Element

      außerhalb des Elements
      wird nicht ausgewählt.

      Nachfolgend finden Sie die Überschriften, aus denen die Zeilen 3 und 5 ausgewählt werden.

      Artikel h2 (...)

      ...

      Dieser Titel wird ausgewählt

      Dieser Titel wird ausgewählt

      Direkte Kinderauswahl

      Manchmal gehen untergeordnete Selektoren zu weit und wählen mehr als gewünscht aus. Manchmal müssen nur die direkten untergeordneten Elemente eines übergeordneten Elements ausgewählt werden und nicht jede Instanz eines Elements, das tief in einem Vorfahren verschachtelt ist. In diesem Fall kann ein direkter untergeordneter Selektor verwendet werden, indem im Selektor ein Größer-als-Zeichen (>) zwischen dem übergeordneten und dem untergeordneten Element platziert wird.

      Beispielsweise ist „article > p“ nur dann ein direkter untergeordneter Selektor, wenn die Elemente

      Befindet sich direkt im Element

      . Jedes Element<р>außerhalb des Elements platziert
      oder in einem anderen Element als verschachtelt
      , wird nicht ausgewählt.

      Unten ist der Absatz in Zeile 3 das einzige direkte untergeordnete Element seines übergeordneten Elements

      , deshalb wurde es ausgewählt.

      Artikel > p (...)

      Dieser Absatz wird ausgewählt

      Verwandte Selektoren

      Zu wissen, wie man untergeordnete Elemente auswählt, ist größtenteils nützlich und wird häufig verwendet. Möglicherweise müssen jedoch auch Geschwisterelemente ausgewählt werden, also Elemente, die einen gemeinsamen Vorfahren haben. Eine solche Auswahl kann mithilfe eines gemeinsamen Geschwisterselektors und benachbarter Selektoren erfolgen.

      Generische Geschwisterauswahl

      Mit der allgemeinen Geschwisterauswahl können Sie Elemente auswählen, die auf der Grundlage ihrer Geschwister ausgewählt werden sollen, d. h. derjenigen, die das gleiche gemeinsame übergeordnete Element haben. Sie werden durch die Verwendung des Tilde-Zeichens (~) zwischen zwei Elementen innerhalb eines Selektors erstellt. Das erste Element gibt an, dass das zweite Element ein gleichgeordnetes Element sein muss und beide das gleiche übergeordnete Element haben müssen.

      Der h2~p-Selektor ist ein allgemeiner Geschwisterselektor, der nach Elementen sucht

      Die nach irgendwelchen Elementen kommen

      im selben Elternteil. Zum Element

      Wurde ausgewählt, muss es nach jedem Element stehen

      .

      Die Absätze in den Zeilen 5 und 9 werden ausgewählt, weil sie nach einer Überschrift im Dokumentbaum stehen und dasselbe übergeordnete Element wie eine zugehörige Überschrift haben.

      H2 ~ p(...)

      ...

      Dieser Absatz wird ausgewählt

      Dieser Absatz wird ausgewählt

      Angrenzende Selektoren

      Manchmal ist es wünschenswert, etwas mehr Kontrolle zu haben, einschließlich der Möglichkeit, ein Geschwisterkind auszuwählen, das einem anderen Geschwisterkind direkt folgt. Ein benachbarter Selektor wählt nur Geschwisterelemente aus, die unmittelbar auf ein anderes Geschwisterelement folgen. Anstelle eines Tilde-Zeichens, wie es bei einem gemeinsamen Geschwisterselektor der Fall ist, verwendet ein Geschwisterselektor ein Pluszeichen (+) zwischen zwei Elementen im Selektor. Auch hier gibt das erste Element an, dass das zweite Element unmittelbar folgen und mit ihm in Beziehung stehen muss und dass beide Elemente dasselbe übergeordnete Element haben müssen.

      Werfen wir einen Blick auf den benachbarten Selektor h2 + p. Es werden nur Elemente ausgewählt

      Kommt unmittelbar nach den Elementen

      . Beide müssen außerdem das gleiche übergeordnete Element haben.

      Der Absatz in Zeile 5 wird ausgewählt, da er unmittelbar auf die entsprechende Überschrift folgt und sie denselben übergeordneten Absatz haben.

      H2 + p(...)

      ...

      Dieser Absatz wird ausgewählt

      Beispiel für benachbarte Selektoren

      Input ( display: none; ) label, ul ( border: 1px solid #cecfd5; border-radius: 6px; ) label ( color: #0087cc; Cursor: Zeiger; display: inline-block; Schriftgröße: 18px; padding: 5px 9px; Übergang: alle .15s easy; ) label:hover ( color: #ff7b29; ) input:checked + label ( box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; Überlauf: versteckt; Übergang: alle .15s easy; ) input:checked ~ nav ( max-height: 500px; ) ul ( list-style: none; margin: 8px 0 0 0; padding: 0; width: 100px; ) li ( border-bottom: 1px solid #cecfd5; ) li:last-child ( border-bottom: 0; ) a ( color: #0087cc; display: block; padding: 6px 12px; Textdekoration: keine; ) a:hover ( Farbe: #ff7b29; )

      Attributselektoren

      Einige der zuvor besprochenen generischen Selektoren können auch als Attributselektoren definiert werden, bei denen ein Element basierend auf einem Klassen- oder ID-Wert ausgewählt wird. Diese Selektoren Klassenattribute und id sind weit verbreitet und ziemlich mächtig, aber das ist erst der Anfang. In den letzten Jahren sind weitere Attributselektoren entstanden, insbesondere mit CSS3, die große Fortschritte gemacht haben. Elemente können nun basierend darauf ausgewählt werden, ob ein Attribut vorhanden ist und welchen Wert es enthält.

      Attributpräsenzselektor

      Der erste Attributselektor identifiziert ein Element basierend darauf, ob das Attribut aktiviert ist oder nicht, unabhängig von seinem tatsächlichen Wert. Um ein Element basierend darauf auszuwählen, ob ein Attribut vorhanden ist oder nicht, geben Sie einfach den Attributnamen ein eckige Klammern() im Selektor. Nach jedem Typ- oder Klassenselektor können eckige Klammern stehen, abhängig vom gewünschten Grad an Spezifität.

      A (...)

      ...

      Attributselektor =

      Um ein Element mit einem bestimmten und präzisen Wert zu identifizieren, kann derselbe Selektor wie zuvor verwendet werden, aber dieses Mal steht der gewünschte Wert in eckigen Klammern hinter dem Attributnamen. Innerhalb der eckigen Klammern sollte nach dem Gleichheitszeichen (=) ein Attributname stehen, wobei in den Anführungszeichen der gewünschte Attributwert steht.

      A (...)

      ...

      Attributselektor *=

      Wenn wir versuchen, ein Element zu finden, das auf einem Teil eines Attributwerts basiert, aber keine exakte Übereinstimmung aufweist, kann das Sternchen (*) in den eckigen Klammern des Selektors verwendet werden. Das Sternchen muss unmittelbar nach dem Attributnamen und unmittelbar vor dem Gleichheitszeichen stehen. Das bedeutet, dass der folgende Wert nur im Attributwert erscheinen oder darin enthalten sein muss.

      A (...)

      ...

      Attributselektor ^=

      Zusätzlich zur Auswahl eines Elements basierend auf dem Attributwert, der den angegebenen Text enthält, können Sie ein Element auch basierend darauf auswählen, wo der Attributwert beginnt. Die Verwendung des Zirkumflexzeichens (^) in Auswahlklammern zwischen dem Attributnamen und dem Gleichheitszeichen bedeutet, dass der Attributwert mit dem angegebenen Text beginnen muss.

      A (...)

      ...

      Attributselektor $=

      Das Gegenteil des vorherigen Selektors ist ein Attributselektor, bei dem der Wert mit etwas Text endet. Anstelle des Zeichens ^ wird in den Selektorklammern zwischen dem Attributnamen und dem Gleichheitszeichen ein Dollarzeichen ($) verwendet. Die Verwendung eines Dollarzeichens bedeutet, dass der Attributwert mit dem angegebenen Text enden muss.

      A (...)

      ...

      Attributselektor ~=

      Manchmal können Attributwerte voneinander beabstandet sein, sodass nur eines der Wörter zum Erstellen einer Auswahl geeignet sein muss. In diesem Fall bedeutet die Verwendung des Tilde-Zeichens (~) in den Selektorklammern zwischen dem Attributnamen und dem Gleichheitszeichen, dass der Attributwert durch Leerzeichen getrennt ist, von denen ein Wort genau mit dem angegebenen Wert übereinstimmt.

      A (...)

      ...

      Attributselektor |=

      Wenn der Attributwert durch Bindestriche statt durch Leerzeichen getrennt wird, kann in den Auswahlklammern zwischen dem Attributnamen und dem Gleichheitszeichen ein vertikales Linienzeichen (|) verwendet werden. Eine vertikale Linie zeigt an, dass der Attributwert durch einen Bindestrich getrennt werden kann, Wörter jedoch mit dem angegebenen Wert beginnen müssen.

      A (...)

      ...

      Beispiel für Attributselektoren

      Ul ( Listenstil: keine; Rand: 0; Polsterung: 0; ) a ( Hintergrundposition: 0 50 %; Hintergrundwiederholung: keine Wiederholung; Farbe: #0087cc; Polsterung links: 22 Pixel; Textdekoration: keine; ) a:hover ( Farbe: #ff7b29; ) a ( Hintergrundbild: url("images/pdf.png"); ) a ( Hintergrundbild: url("images/doc.png"); ) a ( Hintergrundbild: url("images/image.png"); ) a ( Hintergrundbild: url("images/audio.png"); ) a ( Hintergrundbild: url("images/video.png" ); )

      Übersicht über Attributselektoren
      BeispielNameBeschreibung
      AAttributpräsenzselektorWählt ein Element aus, wenn das angegebene Attribut vorhanden ist.
      AAttributselektor =Wählt ein Element aus, wenn der Wert dieses Attributs genau mit dem angegebenen übereinstimmt.
      AAttributselektor *=Wählt ein Element aus, wenn der Wert dieses Attributs mindestens eine Instanz des angegebenen Textes enthält.
      AAttributselektor ^=Wählt ein Element aus, wenn der Wert dieses Attributs mit dem angegebenen Text beginnt.
      AAttributselektor $=Wählt ein Element aus, wenn der Wert dieses Attributs mit dem angegebenen Text endet.
      AAttributselektor ~=Wählt ein Element aus, wenn der Wert des angegebenen Attributs durch Leerzeichen getrennt ist und genau mit einem einzelnen angegebenen Wort übereinstimmt.
      AAttributselektor |=Wählt ein Element aus, wenn der Wert des angegebenen Attributs durch einen Bindestrich getrennt ist und mit dem angegebenen Wort beginnt.

      Pseudoklassen

      Pseudoklassen ähneln regulären Klassen in HTML, werden jedoch nicht direkt im Markup angegeben, sondern dynamisch als Ergebnis von Benutzeraktionen oder der Dokumentstruktur aufgefüllt. Die häufigste Pseudoklasse, die Sie wahrscheinlich schon einmal gesehen haben, ist :hover. Beachten Sie, dass diese Pseudoklasse wie alle anderen Pseudoklassen mit einem Doppelpunkt (:) beginnt.

      Pseudoklassen verknüpfen

      Einige grundlegende Pseudoklassen umfassen zwei Pseudoklassen, die sich um Referenzen drehen. Dies sind die Pseudoklassen :link und :visited und sie bestimmen, ob ein Link besucht wurde oder nicht. Um einen Link zu formatieren, der noch nicht besucht wurde, kommt die Pseudoklasse :link ins Spiel, und die Pseudoklasse :visited stilisiert Links, die der Benutzer bereits besucht hat, basierend auf seinem Browserverlauf.

      A:link (...) a:besucht (...)

      Pseudoklassen für Benutzeraktionen

      Basierend auf Benutzeraktionen können verschiedene Pseudoklassen dynamisch auf ein Element angewendet werden, darunter :hover, :active und :focus. Die Pseudoklasse :hover wird auf ein Element angewendet, wenn der Benutzer den Cursor über das Element bewegt, was am häufigsten bei Links verwendet wird. Die Pseudoklasse:active wird auf ein Element angewendet, wenn der Benutzer das Element aktiviert, beispielsweise indem er darauf klickt. Schließlich wird die Pseudoklasse:focus auf ein Element angewendet, wenn der Benutzer das Element zum Fokus der Seite gemacht hat, häufig durch Verwendung der Tab-Taste beim Wechseln von einem Element zum anderen.

      A:hover (...) a:aktiv (...) a:fokus (...)

      Schnittstellenstatus-Pseudoklassen

      Wie Links gibt es auch einige Pseudoklassen, die mit dem Status von UI-Elementen verknüpft sind, insbesondere innerhalb von Formularen. Zu diesen Pseudoklassen gehören :enabled, :disabled, :checked und :indeterminate.

      Die Pseudoklasse „:enabled“ wählt Felder aus, die aktiviert und zur Verwendung verfügbar sind, und die Pseudoklasse „:disabled“ wählt Felder aus, an die ein „disabled“-Attribut gebunden ist. Viele Browser blenden solche deaktivierten Felder standardmäßig aus, um Benutzer darüber zu informieren, dass das Feld nicht für die Interaktion verfügbar ist. Ihr Stil kann jedoch über die Pseudoklasse :disabled nach Wunsch angepasst werden.

      Eingabe:aktiviert (...) Eingabe:deaktiviert (...)

      Die letzten beiden Schnittstellenstatuselemente, die Pseudoklassen :checked und :indeterminate, drehen sich um Kontrollkästchen und Optionsfelder. Die Pseudoklasse :checked wählt Kontrollkästchen oder Optionsfelder aus, von denen Sie erwarten, dass sie aktiviert sind. Wenn kein Kontrollkästchen oder Optionsfeld aktiviert oder ausgewählt ist, befindet es sich in einem unbestimmten Zustand, für den die Pseudoklasse :indeterminate verwendet werden kann, um auf ähnliche Elemente abzuzielen.

      Eingabe:geprüft (...) Eingabe:unbestimmt (...)

      Pseudoklassen von Struktur und Position

      Mehrere Pseudoklassen beziehen sich auf Struktur und Position basierend darauf, wo Elemente im Dokumentbaum gefunden werden. Diese Pseudoklassen gibt es in verschiedenen Formen und Größen, von denen jede ihre eigene, einzigartige Funktionalität bietet. Einige Pseudoklassen gibt es schon länger als andere, aber CSS3 brachte eine ganze Reihe neuer Pseudoklassen mit sich, die die bestehenden ergänzen.

      :erstes-Kind, :letztes-Kind und :nur-Kind

      Die ersten strukturellen Pseudoklassen, auf die Sie wahrscheinlich stoßen werden, sind :first-child , :last-child und :only-child . Die Pseudoklasse :first-child wählt ein Element aus, wenn es das erste untergeordnete Element im übergeordneten Element ist, während die Pseudoklasse :last-child das Element auswählt, wenn es das letzte untergeordnete Element im übergeordneten Element ist. Diese Pseudoklassen eignen sich ideal zum Auswählen des ersten oder letzten Elements in einer Liste usw. Darüber hinaus wählt :only-child ein Element aus, wenn es das einzige Element im übergeordneten Element ist. Alternativ kann die :only-child-Pseudoklasse als :first-child:last-child geschrieben werden, allerdings hat :only-child eine geringere Spezifität.

      Hier gibt der Selektor li:first-child das erste Listenelement an, während li:last-child das letzte Listenelement angibt und somit die Zeilen 2 und 10 auswählt. Der Selektor div:only-child sucht nach

      , das das einzige untergeordnete Element des übergeordneten Elements ist, ohne weitere gleichgeordnete Elemente. In diesem Fall wird Zeile 4 ausgewählt, da dies die einzige ist
      in diesem Listenelement.

      Li:erstes-Kind (...) li:letztes-Kind (...) div:nur-Kind (...)

      • Dieses Element wird ausgewählt
      • Dieses Div wird ausgewählt
      • ...
        ...
      • Dieses Element wird ausgewählt

      :first-of-type, :last-of-type und :only-of-type

      Das Finden des ersten, letzten und einzigen Kindes eines Elternteils ist sehr nützlich und oft auch alles, was erforderlich ist. Manchmal möchten Sie jedoch nur das erste, letzte oder einzige untergeordnete Element eines bestimmten Elementtyps auswählen. Sie möchten beispielsweise nur den ersten oder letzten Absatz eines Artikels oder möglicherweise nur ein Bild innerhalb eines Artikels auswählen. Glücklicherweise helfen dabei die Pseudoklassen :first-of-type, :last-of-type und :only-of-type.

      Die Pseudoklasse „:first-of-type“ wählt das erste Element ihres Typs innerhalb der übergeordneten Klasse aus, während die Pseudoklasse „:last-of-type“ das letzte Element dieses Typs innerhalb der übergeordneten Klasse auswählt. Die Pseudoklasse :only-of-type wählt ein Element aus, wenn es das einzige seines Typs im übergeordneten Element ist.

      Im folgenden Beispiel wählen die Pseudoklassen p:first-of-type und p:last-of-type jeweils den ersten und letzten Absatz im Artikel aus, unabhängig davon, ob es sich tatsächlich um die ersten oder letzten untergeordneten Absätze handelt der Artikel. Die Zeilen 3 und 6 werden von diesen Selektoren ausgewählt. Der img:only-of-type-Selektor gibt das Bild in Zeile 5 als einziges Bild an, das im Artikel erscheint.

      P:first-of-type (...) p:last-of-type (...) img:only-of-type (...)

      ...

      Dieser Absatz wird ausgewählt

      Dieser Absatz wird ausgewählt

      ...

      Schließlich gibt es mehrere Struktur- und Positions-Pseudoklassen, die Elemente basierend auf Zahlen oder algebraischen Ausdrücken auswählen. Zu diesen Pseudoklassen gehören :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) und :nth-last-of-type(n) . Alle diese eindeutigen Pseudoklassen beginnen mit dem n-ten und nehmen eine Zahl oder einen Ausdruck in Klammern an, der durch das Symbol n bezeichnet wird.

      Die Zahl oder der Ausdruck in Klammern gibt genau an, welches Element bzw. welche Elemente ausgewählt werden sollen. Durch die Verwendung einer bestimmten Zahl wird das einzelne Element vom Anfang oder Ende des Dokumentbaums berechnet und dann ausgewählt. Durch die Verwendung eines Ausdrucks wird der Satz von Elementen vom Anfang oder Ende des Dokumentbaums ausgewertet und eine Gruppe oder Wiederholung davon ausgewählt.

      Verwendung von Zahlen und Ausdrücken in Pseudoklassen

      Wie bereits erwähnt, wird bei Verwendung einer bestimmten Zahl in einer Pseudoklasse vom Anfang oder Ende des Dokumentbaums aus gerechnet und ein passendes Element ausgewählt. Beispielsweise wählt der Selektor li:nth-child(4) das vierte Element in der Liste aus. Die Zählung beginnt beim ersten Listenelement und erhöht sich für jedes Listenelement um eins, bis schließlich das vierte Element gefunden und ausgewählt wird. Bei der Angabe einer bestimmten Zahl muss diese positiv sein.

      Ausdrücke für Pseudoklassen liegen im Format an, an+b, an-b, n+b, -n+b und -an+b vor. Der gleiche Ausdruck kann übersetzt und gelesen werden als (a×n)±b. Die Variable a gibt den Faktor an, mit dem die Elemente berechnet werden, während die Variable b angibt, wo die Zählung beginnt oder stattfindet.

      Beispielsweise gibt der Selektor li:nth-child(3n) jedes dritte Element eines Listenelements an. Die Verwendung dieses Ausdrucks entspricht 3x0, 3x1, 3x2 usw. Wie Sie sehen können, wählen die Ergebnisse dieses Ausdrucks das dritte, sechste und jedes Element aus, das ein Vielfaches von drei ist.

      Darüber hinaus können die Schlüsselwörter „odd“ und „even“ als Werte verwendet werden. Wie zu erwarten, wählen sie ungerade bzw. gerade Elemente aus. Wenn die Schlüsselwörter nicht attraktiv sind, wählt der Ausdruck 2n+1 alle ungeraden Elemente aus, und der Ausdruck 2n wählt alle geraden Elemente aus.

      Der Selektor li:nth-child(4n+7) definiert jedes vierte Element in der Liste, beginnend mit dem siebten Element. Auch hier ist die Verwendung dieses Ausdrucks äquivalent zu (4x0)+7, (4x1)+7, (4x2)+7 usw. Die Ergebnisse dieses Ausdrucks wählen das siebte, elfte, fünfzehnte und jedes vierte Element aus.

      Bei Verwendung von n ohne führende Zahl wird a als 1 ausgewertet. Der Selektor li:nth-child(n+5) wählt jedes Listenelement beginnend mit dem fünften aus, wobei die ersten vier Listenelemente nicht ausgewählt werden. Im Ausdruck wird dies als (1×0)+5, (1×1)+5, (1×2)+5 usw. analysiert.

      Mit negativen Zahlen können komplexere Dinge erstellt werden. Beispielsweise zählt der Selektor li:nth-child(6n-4) jedes sechste Listenelement, beginnend bei -4, und wählt das zweite, achte, vierzehnte Listenelement usw. aus. Derselbe Selektor li:nth-child(6n-4) kann auch als li:nth-child(6n+2) geschrieben werden, ohne die negative b-Variable zu verwenden.

      Auf eine negative Variable oder ein negatives Argument n muss eine positive Variable b folgen. Wenn dem Argument n eine negative Variable a vorangestellt ist, bestimmt die Variable b, wie hoch die Anzahl erreicht wird. Beispielsweise wählt der Selektor li:nth-child(-3n+12) jedes dritte Listenelement in den ersten zwölf Elementen aus. Der Selektor li:nth-child(-n+9) wählt die ersten neun Elemente in der Liste aus, da die Variable a ohne deklarierte Zahl standardmäßig den Wert -1 hat.

      :nth-child(n) und :nth-last-child(n)

      Mit einem allgemeinen Verständnis der Funktionsweise von Zahlen und Ausdrücken in Pseudoklassen werfen wir einen Blick auf nützliche Pseudoklassen, in denen diese Zahlen und Ausdrücke verwendet werden können. Die ersten davon sind :nth-child(n) und :nth-last -child(n) . Diese Pseudoklassen funktionieren ähnlich wie :first-child und :last-child , indem sie alle Elemente im übergeordneten Element untersuchen und zählen und nur ein bestimmtes Element auswählen. :nth-child(n) funktioniert vom Anfang des Dokumentbaums und :nth-last-child(n) funktioniert vom Ende des Dokumentbaums.

      Werfen wir mithilfe der Pseudoklasse :nth-child(n) einen Blick auf den Selektor li:nth-child(3n). Es definiert jedes dritte Listenelement, daher werden die Zeilen 4 und 7 ausgewählt.

      Li:nth-child(3n) (…)

      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt

      Die Verwendung eines anderen Ausdrucks in der Pseudoklasse :nth-child(n) führt zu einer anderen Auswahl. Der Selektor li:nth-child(2n+3) definiert beispielsweise jedes zweite Element in der Liste, beginnend mit dem dritten. Als Ergebnis werden die Elemente in den Zeilen 4 und 6 ausgewählt.

      Li:nth-child(2n+3) (...)

      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt

      Wenn Sie den Ausdruck erneut ändern, diesmal mit einem negativen Wert, erhalten Sie eine neue Auswahl. Hier gibt der Selektor li:nth-child(-n+4) die ersten vier Elemente der Liste an, während die übrigen Elemente nicht ausgewählt werden, sodass die Zeilen 1 bis 4 ausgewählt werden.

      Li:nth-child(-n+4) (...)

      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt

      Das Hinzufügen einer negativen Zahl vor n ändert die Auswahl erneut. Hier definiert der Selektor li:nth-child(-2n+5) jedes zweite Listenelement aus den ersten fünf Elementen, sodass die Elemente in den Zeilen 2, 4 und 6 ausgewählt werden.

      Li:nth-child(-2n+5) (...)

      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt

      Durch Ändern der Pseudoklasse :nth-child(n) in :nth-last-child(n) wird die Zählrichtung geändert, sodass die Zählung am Ende des Dokumentbaums beginnt. Der Selektor li:nth-last-child(3n+2) gibt beispielsweise jedes dritte Listenelement an, beginnend vom zweiten bis zum letzten, und zwar in Richtung des Anfangs der Liste. Hier werden die Listenelemente in den Zeilen 3 und 6 ausgewählt.

      Li:nth-last-child(3n+2) (...)

      • Dieses Element wird ausgewählt
      • Dieses Element wird ausgewählt

      :nth-of-type(n) und :nth-last-of-type(n)

      Die Pseudoklassen :nth-of-type(n) und :nth-last-of-type(n) sind :nth-child(n) und :nth-last-child(n) sehr ähnlich, aber anstelle von Zählen jedes Elements Innerhalb des übergeordneten Elements zählen die Pseudoklassen :nth-of-type(n) und :nth-last-of-type(n) nur Elemente ihres eigenen Typs. Wenn Sie beispielsweise Absätze in einem Artikel zählen, überspringen die Pseudoklassen :nth-of-type(n) und :nth-last-of-type(n) alle Überschriften

      oder verschiedene Elemente, die keine Absätze sind, während :nth-child(n) und :nth-last-child(n) jedes Element zählen, unabhängig von seinem Typ, und nur diejenigen auswählen, die mit dem Element im angegebenen Selektor übereinstimmen. Darüber hinaus sind alle möglichen Ausdrücke, die in :nth-child(n) und :nth-last-child(n) verwendet werden, auch im Pseudo :nth-of-type(n) und :nth-last-of-type verfügbar -Klassen (n) .

      Durch die Verwendung der :nth-of-type(n)-Pseudoklasse im p:nth-of-type(3n)-Selektor können wir jeden dritten Absatz im übergeordneten Element definieren, unabhängig von anderen verwandten Elementen innerhalb des übergeordneten Elements. Hier werden die Absätze der Zeilen 5 und 9 ausgewählt.

      P:nth-of-type(3n) (...)

      ...

      Dieser Absatz wird ausgewählt

      ...

      Dieser Absatz wird ausgewählt

      Wie bei den Pseudoklassen :nth-child(n) und :nth-last-child(n) besteht der Hauptunterschied zwischen :nth-of-type(n) und :nth-last-of-type(n) darin dass :nth-of-type(n) Elemente vom Anfang des Dokumentbaums zählt und :nth-last-of-type(n) Elemente vom Ende des Dokumentbaums zählt.

      Mit der Pseudoklasse :nth-last-of-type(n) können wir einen Selektor p:nth-last-of-type(2n+1) schreiben, der jeden zweiten Absatz ab dem Ende des übergeordneten Elements angibt, beginnend mit der letzte Absatz. Hier werden die Absätze der Zeilen 4, 7 und 9 ausgewählt.

      P:nth-last-of-type(2n+1) (...)

      ...

      Dieser Absatz wird ausgewählt

      ...

      Dieser Absatz wird ausgewählt

      Dieser Absatz wird ausgewählt

      Pseudoklasse:Ziel

      Die Pseudoklasse :target wird zum Formatieren von Elementen verwendet, wenn der Wert des id-Attributs mit dem URI-Fragmentzeiger übereinstimmt. Dieser Teil des URI wird anhand des Hash-Zeichens (#) und dessen, was unmittelbar darauf folgt, erkannt. Die Adresse http://example.com/index.html#hello enthält einen Hallo-Zeiger. Wenn es beispielsweise mit dem Wert des id-Attributs eines Elements auf der Seite übereinstimmt,

      Pseudoklasse:leer

      Mit der Pseudoklasse :empty können Sie Elemente auswählen, die keine untergeordneten Elemente oder Text enthalten. Kommentare, Verarbeitungsanweisungen und leerer Text gelten nicht als untergeordnete Elemente und werden nicht als solche behandelt.

      Die Verwendung der Pseudoklasse div:empty bestimmt

      Keine Kinder oder Text. Unten ausgewählt
      in den Zeilen 2 und 3, da diese völlig leer sind. Auch wenn der zweite
      Enthält einen Kommentar, wird er nicht als untergeordnetes Element betrachtet und daher verlassen
      leer. Erste
      enthält Text, das dritte enthält ein einzelnes Leerzeichen und das letzte enthält ein untergeordnetes Element Daher sind sie alle ausgeschlossen und nicht ausgewählt.

      Div:leer (...)

      Hallo

      Pseudoklasse:nicht

      Die Pseudoklasse :not(x) nimmt ein Argument und filtert die getroffene Auswahl. Der p:not(.intro)-Selektor verwendet die :not-Pseudoklasse, um jeden Absatz ohne eine Intro-Klasse zu definieren. Das Absatzelement wird am Anfang des Selektors definiert, gefolgt von der Pseudoklasse :not(x). In den Klammern befindet sich ein Negationsselektor, in diesem Fall die Intro-Klasse.

      Unten verwenden sowohl die Selektoren div:not(.awesome) als auch :not(div) die Pseudoklasse :not(x). Der Selektor div:not(.awesome) definiert alle

      ohne class awesome , während der :not(div)-Selektor ein Element angibt, das es nicht ist
      . Als Ergebnis wird es ausgewählt
      in Zeile 1 sowie zwei Abschnitte in den Zeilen 3 und 4. Das einzige nicht ausgewählte Element ist
      mit der awesome-Klasse, da sie über zwei Pseudoklassen hinausgeht.

      Div:not(.awesome) (...) :not(div) (...)

      Dieses Div wird ausgewählt
      ...
      Dieser Abschnitt wird ausgewählt. Dieser Abschnitt wird ausgewählt

      Beispiel mit Pseudoklassen

      ...
      Nummer Spieler Position Höhe Gewicht
      8 Marco Belinelli G 6-5 195
      5 Carlos Boozer F 6-9 266

      Tabelle ( border-collapse: separat; border-spacing: 0; width: 100 %; ) th, td ( padding: 6px 15px; ) th ( background: #42444e; color: #fff; text-align: left; ) tr :first-child th:first-child ( border-top-left-radius: 6px; ) tr:first-child th:last-child ( border-top-right-radius: 6px; ) td ( border-right: 1px solid #c6c9cc; border-bottom: 1px solid #c6c9cc; ) td:first-child ( border-left: 1px solid #c6c9cc; ) tr:nth-child(even) td ( Hintergrund: #eaeaed; ) tr:last- child td:first-child ( border-bottom-left-radius: 6px; ) tr:last-child td:last-child ( border-bottom-right-radius: 6px; )

      Übersicht über Pseudoklassen
      BeispielNameBeschreibung
      eine VerbindungLink-PseudoklasseWählt Links aus, die vom Benutzer nicht angezeigt wurden.
      a:besuchtLink-PseudoklasseWählt Links aus, die vom Benutzer besucht wurden.
      a:schwebenAction-PseudoklasseWählt ein Element aus, wenn der Benutzer mit der Maus darüber fährt.
      a:aktivAction-PseudoklasseWählt ein Element aus, wenn der Benutzer es aktiviert.
      ein FokusAction-PseudoklasseWählt ein Element aus, wenn der Benutzer es zu einem Aufmerksamkeitspunkt gemacht hat.
      Eingabe: aktiviertStaatliche PseudoklasseWählt ein Element in einem zugänglichen Zustand aus.
      Eingabe: deaktiviertStaatliche PseudoklasseWählt über das Attribut „disabled“ ein Element in einem deaktivierten Zustand aus.
      Eingabe: überprüftStaatliche PseudoklasseWählt ein aktiviertes Kontrollkästchen oder Optionsfeld aus.
      Eingabe: unbestimmtStaatliche PseudoklasseWählt ein Kontrollkästchen oder Optionsfeld aus, das nicht aktiviert oder deaktiviert war, sodass es in einem undefinierten Zustand verbleibt.
      li:erstes KindStrukturelle PseudoklasseWählt das erste Element im übergeordneten Element aus.
      li:last-childStrukturelle PseudoklasseWählt das letzte Element im übergeordneten Element aus.
      div:only-childStrukturelle PseudoklasseWählt ein einzelnes Element im übergeordneten Element aus.
      p:erster TypStrukturelle PseudoklasseWählt das erste Element seines Typs im übergeordneten Element aus.
      p:last-of-typeStrukturelle PseudoklasseWählt das letzte Element seines Typs im übergeordneten Element aus.
      img:only-of-typeStrukturelle PseudoklasseWählt das einzige Element seines Typs im übergeordneten Element aus.
      li:nth-child(2n+3)Strukturelle PseudoklasseWählt ein Element aus, das einer bestimmten Zahl oder einem bestimmten Ausdruck entspricht, und zählt alle Elemente vom Anfang des Dokumentbaums an.
      li:nth-last-child(3n+2)Strukturelle PseudoklasseWählt ein Element aus, das einer bestimmten Zahl oder einem bestimmten Ausdruck entspricht, und zählt alle Elemente vom Ende des Dokumentbaums an.
      p:nth-of-type(3n)Strukturelle PseudoklasseWählt ein Element aus, das einer bestimmten Zahl oder einem bestimmten Ausdruck entspricht, und zählt nur Elemente dieses Typs vom Anfang des Dokumentbaums an.
      p:nth-last-of-type(2n+1)Strukturelle PseudoklasseWählt ein Element aus, das einer bestimmten Zahl oder einem bestimmten Ausdruck entspricht, und zählt nur Elemente dieses Typs vom Ende des Dokumentbaums an.
      Abschnitt:ZielPseudoklasse:ZielWählt ein Element aus, dessen ID-Attributwert mit der URI-Fragment-ID übereinstimmt.
      div:leerPseudoklasse:leerWählt ein Element aus, das keine untergeordneten Elemente oder Text enthält.
      div:not(.awesome)Pseudoklasse:nichtWählt ein Element aus, das nicht durch das deklarierte Argument dargestellt wird.

      Pseudoelemente

      Pseudoelemente sind dynamische Elemente, die im Dokumentbaum nicht vorhanden sind. Wenn sie mit Selektoren verwendet werden, erzeugen diese Pseudoelemente eindeutige Teile der Seite, die gestaltet werden können. Ein wichtiger Punkt ist, dass in einem Selektor jeweils nur ein Pseudoelement verwendet werden kann.

      Text-Pseudoelemente

      Die ersten implementierten Pseudoelemente waren die Pseudoelemente :first-letter und :first-line text. Das Pseudoelement :first-letter gibt den ersten Textbuchstaben innerhalb eines Elements an, während :first-line die erste Textzeile innerhalb eines Elements angibt.

      In der Demo unten ist der erste Buchstabe eines Absatzes mit der Klasse alpha auf eine große Schriftgröße und -farbe eingestellt, ebenso wie die erste Zeile eines Absatzes mit der Klasse bravo . Diese Auswahl erfolgt mithilfe der Pseudoklassen :first-letter bzw. :first-line text.

      Alpha:first-letter, .bravo:first-line ( Farbe: #ff7b29; Schriftgröße: 18px; )

      Lorem ipsum dolor...

      Ganzzahl eget enim...

      Demonstration von Textpseudoelementen

      Durch Pseudoelemente generierter Inhalt

      Die Pseudoelemente :before und :after erstellen neue Inline-Pseudoelemente nur innerhalb des ausgewählten Elements. Am häufigsten werden diese Pseudoelemente in Kombination mit der Content-Eigenschaft verwendet, um der Seite geringfügige Informationen hinzuzufügen. Dies ist jedoch nicht immer der Fall. Durch die zusätzliche Verwendung dieser Pseudoelemente können Benutzeroberflächenkomponenten zu einer Seite hinzugefügt werden, ohne dass das Dokument mit nicht-semantischen Elementen überladen werden muss.

      Das Pseudoelement :before erstellt ein Pseudoelement vor oder vor dem ausgewählten Element, während :after ein Pseudoelement nach oder hinter dem ausgewählten Element erstellt. Diese Pseudoelemente erscheinen innerhalb des ausgewählten Elements verschachtelt und nicht außerhalb. Im Folgenden wird das Pseudoelement :after verwendet, um den href-Attributwert von Links in Klammern nach dem Link selbst anzuzeigen. Diese Informationen sind nützlich, aber letztendlich unterstützt nicht jeder Browser diese Pseudoelemente.

      A:after ( Farbe: #9799a7; Inhalt: " (" attr(href) ")"; Schriftgröße: 11px; )

      Suchen Sie im Internet Erfahren Sie, wie Sie eine Website erstellen

      Demonstration von durch Inhalte generierten Pseudoelementen

      Pseudoelement::selection

      Das Pseudoelement ::selection definiert den vom Benutzer ausgewählten Teil des Dokuments. Die Auswahl kann dann gestylt werden, allerdings nur mit den Eigenschaften color , background , background-color und text-shadow. Es ist zu beachten, dass die Eigenschaft „Hintergrundbild“ ignoriert wird. Allerdings kann die Abkürzungseigenschaft „Hintergrund“ zum Hinzufügen von Farbe verwendet werden, alle Bilder werden jedoch ignoriert.

      Doppelpunkt (:) und Doppelpunkt (::)

      Das Pseudoelement ::selection wurde CSS3 hinzugefügt, um Pseudoklassen von Pseudoelementen zu trennen, indem der Doppelpunkt verwendet wurde, der Pseudoelementen hinzugefügt wurde. Glücklicherweise unterstützen die meisten Browser sowohl einzelne als auch doppelte Doppelpunktwerte für Pseudoelemente, aber das ::selection-Pseudoelement muss immer mit einem Doppelpunkt beginnen.

      Wenn Sie in der Demo unten einen beliebigen Text auswählen, wird der Hintergrund dank des Pseudoelements ::selection orange. Schauen Sie sich auch ::-moz-selection an. Das Mozilla-Präfix wurde hinzugefügt, um eine bessere Unterstützung für alle Browser zu gewährleisten.

      ::-moz-selection (Hintergrund: #ff7b29;) ::selection (Hintergrund: #ff7b29;)

      Demonstration von Pseudoelementen

      Weiterlesen

      Pfeil (Hintergrund: #2db34a; Farbe: #fff; Anzeige: Inline-Block; Höhe: 30 Pixel; Zeilenhöhe: 30 Pixel; Polsterung: 0 12 Pixel; Position: relativ; Textdekoration: keine; ) .arrow:before, . Pfeil: nach ( Inhalt: ""; Höhe: 0; Position: absolut; Breite: 0; ) .pfeil: vor ( Rand unten: 15 Pixel fest #2db34a; Rand links: 15 Pixel fest transparent; Rand oben: 15 Pixel fest #2db34a; links: -15px; ) .arrow:after ( Rand unten: 15 Pixel durchgehend transparent; Rand links: 15 Pixel durchgehend #2db34a; Rand oben: 15 Pixel durchgehend transparent; rechts: -15px; ) .arrow:hover ( Hintergrund: #ff7b29; ) .arrow:hover:before ( border-bottom: 15px solid #ff7b29; border-top: 15px solid #ff7b29; ) .arrow:hover:after ( border-left: 15px solid #ff7b29; )

      Unterstützung für die Browserauswahl

      Diese Selektoren bieten zwar unterschiedliche Funktionen und die Möglichkeit, einige wirklich erstaunliche Dinge damit zu tun mit CSS, leiden sie manchmal unter einer schlechten Browserunterstützung. Bevor Sie etwas zu Kritisches tun, überprüfen Sie die Selektoren, die Sie in den gängigsten Browsern verwenden möchten, und entscheiden Sie dann, ob sie für Sie geeignet sind oder nicht.

      CSS3.info bietet ein CSS3-Selektortesttool, das Sie darüber informiert, welche Selektoren vom Browser unterstützt werden. Es ist auch eine gute Idee, direkt die Unterstützung Ihres Browsers zu überprüfen.

      Auf Smashing Magazine

    • Verständnis: Pseudoklassenausdrücke des n-ten Kindes auf SitePoint
    • Zähmung fortgeschrittener CSS-Selektoren im Smashing Magazine


      • Freunden erzählen
      Twitter
      Gerät mit...
      Nächster Artikel
      Lesen Sie auch
      Bürosoftware für ein Tourismusunternehmen. Automatisierungsprogramm für eine Selbstreise eines Reisebüros
      Bürosoftware für ein Tourismusunternehmen. Automatisierungsprogramm für eine Selbstreise eines Reisebüros
      2023-10-23 00:05:22
      VKontakte: Eine schnelle Passwortwiederherstellung ist nicht verfügbar
      VKontakte: Eine schnelle Passwortwiederherstellung ist nicht verfügbar
      2023-10-22 00:02:31
      Autoclicker für Maus und Tastatur Der Download von Autoclicker ist sehr schnell
      Autoclicker für Maus und Tastatur Der Download von Autoclicker ist sehr schnell
      2023-10-22 00:02:31
      Klassenkameraden arbeiten nicht!
      Klassenkameraden arbeiten nicht!
      2023-10-22 00:02:31