This page has been robot translated, sorry for typos if any. Original content here.

CSS-Selektoren für jeden Tag

CSS-селекторы, нужные на каждый день

Der Selektor ist also eine formale Beschreibung des Elements oder der Elementgruppe, für die die angegebene Stilregel gilt. Ein einfacher Selektor ist ein Typselektor, ein Klassenselektor oder ein ID-Selektor, dem Pseudoklassen-Selektoren und Attribut-Selektoren folgen können (die letzteren in dieser kurzen Beschreibung sind stumm). Ein Selektor ist eine Folge von einfachen Selektoren, die durch Leerzeichen oder die Zeichen ">" und "+" getrennt sind . Diese Trennzeichen haben eine praktische Bedeutung bei der Erstellung von Websites und sind auf Komfort ausgelegt.

Obwohl viele der hier genannten Selektoren in der CSS3-Spezifikation enthalten sind und dementsprechend nur von modernen Browsern unterstützt werden, sollten Sie sich dennoch mit ihnen vertraut machen und sie im Gedächtnis behalten, da sie sehr praktisch und bequem sind.

CSS-селекторы, нужные на каждый день

Arten von Selektoren

Tag-Selektor , der Selektor ist der Name des Tags, für den Sie Eigenschaften ändern möchten.

Universeller Selektor , der mit dem Symbol * gekennzeichnet ist und zum Ändern der erforderlichen Eigenschaften aller Elemente auf der Seite verwendet wird.

Klassen werden auf Elemente mit einem Klassenattribut und einem erforderlichen Wert angewendet.

Bezeichner werden für Elemente mit dem Attribut id und dem erforderlichen Wert verwendet. Der Hauptunterschied zwischen Klassen und Bezeichnern besteht darin, dass die zweiten Namen eindeutig sein müssen und nicht wiederholt werden müssen, sodass sie mit Skripts (JavaScript) verwendet werden können.

Pseudoklassen dienen dazu, den Stil vorhandener Seitenelemente in Abhängigkeit von ihrem dynamischen Status zu ändern, beispielsweise beim Arbeiten mit Links ( : link ,: besuchte ,: hover ,: aktiv ,: focus ). Pseudo-Elemente definieren den Stil von Elementen, die in der Dokumentstruktur nicht eindeutig definiert sind ( : erster Buchstabe,: erste Zeile ). Außerdem können Sie nicht vorhandenen Inhalt ( : before ,: after und die content- Eigenschaft) generieren und stilisieren. In CSS3 beginnen Pseudo-Elemente mit zwei Doppelpunkten :: ( :: :: Anfangsbuchstaben , :: Erste Zeile , :: Vorher , :: Nachher ).

Attribut-Selektoren Sie ermöglichen die Stilisierung eines Elements nicht nur durch den Tag-Wert, sondern auch durch den Attributwert (a [attr]).

Kontextauswahl . Elemente innerhalb eines anderen Elements gestalten (ab).

Kind-Selektoren Stilisierung eines Elements, das unmittelbar hinter einem anderen Element liegt und dessen direkter Nachkomme ist (a> b).

Nachbarselektoren . Zum Stilisieren benachbarter Elemente mit einem gemeinsamen übergeordneten Element. (a + b)

Verwandte Selektoren . Sie sind bei benachbarten Selektoren ähnlich, jedoch mit dem Unterschied, dass alle benachbarten Elemente stilisiert werden, und nicht nur das erste benachbarte Element. Zuerst in CSS3 erschienen. (a ~ b).

Also lass uns anfangen!

*

  * {
  Marge: 0;
  Polsterung: 0;
  }
 

Beginnen wir mit den einfachsten Dingen für Neueinsteiger, bevor wir zu fortgeschrittenen Selektoren übergehen.

Mit dem Sternsymbol können Sie alle Elemente auf der Seite auswählen. Viele Webentwickler verwenden dies, um alle externen und internen Einrückungen "zurückzusetzen".

Sie können das Symbol * auch für die untergeordneten Objekte eines Objekts verwenden.

  #container * {
  Rand: 1px durchgehend schwarz;
  }
 

Dieser Code zielt auf alle Elemente ab, die dem Block mit dem Bezeichnercontainer untergeordnet sind.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

#X

  #container {
  Breite: 960px;
  Marge: auto;
  }
 

Mit dem Gitterzeichen können wir Elemente anhand der ID auswählen. Dies ist eine der häufigsten Methoden zum Auswählen von Elementen. Seien Sie jedoch vorsichtig, wenn Sie sie verwenden.

"Fragen Sie sich: Muss ich wirklich eine ID für ein Element verwenden, um darauf zu verweisen?"

Die ID-Selektoren sind unflexibel und in verschiedenen Projekten nur schwer wiederzuverwenden. Versuchen Sie nach Möglichkeit zuerst den Tag-Namen oder sogar die Pseudo-Klasse zu verwenden.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

.X

  .error {
  Farbe: rot;
  }
 

Dies ist ein Klassenselektor. Der Unterschied zwischen id und Klassen besteht darin, dass Sie mit Hilfe von Klassen mehrere Elemente gleichzeitig auswählen können. Verwenden Sie Klassen, wenn Sie einen Stil auf eine Gruppe von Elementen anwenden müssen.

Verwenden Sie andernfalls id, um die "Nadeln im Heuhaufen" zu finden, und wenden Sie den Stil nur auf ein bestimmtes Objekt an.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

Xy

  li a {
  Textdekoration: keine;
  }
 

Der nächsthäufigste Selektortyp ist der Kindselektor. Es sollte verwendet werden, wenn eine genauere Auswahl von Elementen erforderlich ist.

Was ist beispielsweise, wenn Sie nicht alle Link-Tags auswählen müssen, sondern nur diejenigen, die sich in einer ungeordneten Liste befinden? Dies ist der Fall, wenn Sie eine untergeordnete Auswahl verwenden sollten.

"Tipp: Wenn Ihr Wähler wie XYZA B.error aussieht, tun Sie wahrscheinlich so etwas. Fragen Sie sich immer, ob dies der einfachste Weg ist."
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X

  a {color: red;}
  ul {margin-left: 0px;}
 

Was ist, wenn Sie auf alle Elemente eines bestimmten Typs auf einer Seite verlinken möchten, wenn sie keine ID oder Klassen haben? Machen Sie es einfacher, verwenden Sie Typ-Selektoren. Wenn Sie alle ungeordneten Listen auswählen müssen, verwenden Sie ul {}.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: Besuch und X: Link

  a: link {color: red;}
  a: besucht {color: purple;}
 

Hier verwenden wir die Pseudo-Klasse: Link, um alle Links auszuwählen, die noch nicht angeklickt wurden.

Es gibt auch eine Pseudo-Klasse: "Besuchte", die es uns erlaubt, den Stil, wie Sie erwartet haben, nur auf die Links anzuwenden, auf die geklickt oder geklickt wurde.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X + Y

  ul + p {
  Farbe: rot;
  }
 

Dies ist der sogenannte benachbarte Selektor. In diesem Fall ist jeder Absatz, der unmittelbar auf jedes ul-Element folgt, rot.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X> Y

  #container> ul {
  Rand: 1px durchgehend schwarz;
  }
 

Der Unterschied zwischen XY und X> Y besteht darin, dass letztere nur direkte Nachkommen auswählen wird. Betrachten Sie das folgende Beispiel:

  <div id = "container">
  <ul>
  <li> Listeneintrag
  <ul>
  <li> Kind </ li>
  </ ul>
  </ li>
  <li> Artikel auflisten </ li>
  <li> Artikel auflisten </ li>
  <li> Artikel auflisten </ li>
  </ ul>
  </ div>
 

Der Selektor #container> ul wählt nur diejenigen ul- Elemente aus, die direkte Nachkommen des div- Blocks mit dem Bezeichnercontainer sind . Ie In diesem Fall wählt dieser Selektor das ul- Element nicht aus, das ein Nachkomme des ersten li- Elements ist.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X ~ Y

  ul ~ p {
  Farbe: rot;
  }
 

Diese Kombination von Schwester- (Geschwister-) Elementen ähnelt X + Y , ist jedoch weniger streng. Wenn im Fall von ul + p nur die ersten Elemente von p ausgewählt werden , die auf ul folgen (d. H., Nachbarschaft wird bei der Auswahl beobachtet), ist der Selektor, den wir jetzt betrachten, allgemeiner.

In unserem Fall werden alle p- Elemente ausgewählt, die dem ul- Element folgen.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [Titel]

  a [titel] {
  Farbe: grün;
  }
 

Hier verweisen wir auf das Selektorattribut. In unserem Beispiel werden nur Links mit dem Titelattribut grün eingefärbt.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href = "foo"]

  a [href = "http://www.codeharmony.ru"] {
  Farbe: rot;
  }
 

Der obige Code ermöglicht die Gestaltung aller Links, deren href-Attribut http://www.codeharmony.ru ist. Diese Links sind rot. Die verbleibenden Links erhalten diesen Stil nicht.

Es funktioniert gut, ist aber etwas unflexibel. Was ist, wenn der Link tatsächlich zu Codeharmony.ru führt, aber vielleicht ist die Adresse als Codeharmony.ru und nicht als http://www.codeharmony.ru aufgeführt? In solchen Fällen können Grundlagen für reguläre Ausdrücke verwendet werden.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href * = "codeharmony"]

  a [href * = "codeharmony"] {
  Farbe: rot;
  }
 

Lass uns weiter gehen; genau das brauchen wir. Ein Sternchen gibt an, dass der Wert, den Sie suchen, in einem beliebigen Teil des Attributs href enthalten sein kann. So können wir sowohl http://www.codeharmony.ru als auch www.codeharmony.ru und codeharmony.ru auswählen.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href ^ = "http"]

  a [href ^ = "http"] {
  Hintergrund: URL (Pfad / zu / external / icon.png) no-repeat;
  Polsterung links: 10px;
  }
 

Haben Sie schon einmal darüber nachgedacht, wie auf einigen Websites neben Links, die zu anderen Websites führen (außerhalb der aktuellen), kleine Symbole angezeigt werden, die den Benutzer darüber informieren? Dies sind hervorragende "Erinnerungen" für den Benutzer, dass der Link zu einer anderen Site führt.

Dies geschieht mit Hilfe des Symbols ^ (Carat) . Es wird normalerweise in regulären Ausdrücken verwendet, um den Anfang einer Zeile zu kennzeichnen. Wenn Sie Links auswählen möchten, deren Attribut href mit http beginnt, können Sie den Selektor aus dem obigen Beispiel verwenden.

Msgstr "Bitte beachten Sie, dass wir nicht nach http: // suchen. Dies ist optional und enthält außerdem keine Links, die das Protokoll https: // verwenden."
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href $ = ". Jpg"]

  a [href $ = ". jpg"] {
  Farbe: rot;
  }
 

Wir verwenden wieder einen regulären Ausdruck und ein $ -Symbol, um das Ende einer Zeile zu markieren. In diesem Beispiel suchen wir nach allen Links, die auf Bilder mit der Erweiterung .jpg verweisen. Natürlich funktioniert dieser Ansatz nicht für Bilder mit den Erweiterungen .gif , .png usw.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [data - * = "foo"]

  a [Daten-Dateityp = "Bild"] {
  Farbe: rot;
  }
 

Wie können wir verschiedene Arten von Bildern behandeln? Wir können zum Beispiel mehrere Selektoren erstellen:

  a [href $ = ". jpg"],
  a [href $ = ". jpeg"],
  a [href $ = ". png"],
  a [href $ = ". gif"] {
  Farbe: rot;
  }
 

Aber es ist eine lästige Pflicht und nicht elegant. Eine andere Option besteht darin, ein eigenes Datendateityp-Attribut zu erstellen und es zu jedem Link hinzuzufügen, der zum Bild führt.

  <a href="path/to/image.jpg" data-filetype="image"> Link </a> 

Auf diese Weise können wir den Code für dieses Beispiel verwenden:

  a [Daten-Dateityp = "Bild"] {
  Farbe: rot;
  }
 
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [foo ~ = "bar"]

  a [data-info ~ = "extern"] {
  Farbe: rot;
  }

  a [data-info ~ = "image"] {
  Rand: 1px durchgehend schwarz;
  }
 

Hier ist ein weiterer interessanter Trick, den nicht jeder kennt. Das Zeichen ~ (Tilde) ermöglicht das Auswählen von Attributen mit durch Leerzeichen getrennten Werten, d. H.

  <a href="path/to/image.jpg" data-info="external image"> Klicken Sie hier </a> 

Mit dieser Technik können wir Proben mit den benötigten Kombinationen erstellen:

  / * Wählen Sie das data-info-Attribut aus, das den externen Wert enthält. * /
  a [data-info ~ = "extern"] {
  Farbe: rot;
  }

  / * und wählen Sie das data-info-Attribut aus, das den Bildwert enthält * /
  a [data-info ~ = "image"] {
  Rand: 1px durchgehend schwarz;
  }
 
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: geprüft

  Eingabe [Typ = Radio]: geprüft {
  Rand: 1px durchgehend schwarz;
  }
 

Diese Pseudoklasse wählt die markierten Elemente aus, z. B. Optionsfeld oder Kontrollkästchen.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nach

  .clearfix: nach {
  Inhalt: "";
  Anzeige: Block;
  klar: beide;
  Sichtbarkeit: versteckt;
  Schriftgröße: 0;
  Höhe: 0;
  }

  .clearfix {
  * Anzeige: Inline-Block;
  Höhe: 1%;
  }
 

Mit dieser Pseudoklasse können Sie Inhalte um das ausgewählte Element generieren.

Dieses Beispiel zeigt, wie die Pseudo-Klasse verwendet wird : after after ein Block mit der Klasse .clearfix erstellt eine leere Zeichenfolge und löscht sie anschließend. Gute Methode, wenn Überlauf nicht angewendet werden kann: ausgeblendet .

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: schweben

  div: hover {
  Hintergrund: # e3e3e3;
  }
 

Sie wissen das sicher. Der offizielle Name klingt wie "Pseudo-Klasse basierend auf Benutzeraktion". Es hört sich unheimlich an, obwohl in Wirklichkeit alles einfach ist. Möchten Sie einen bestimmten Stil auf ein Element anwenden, wenn Sie den Mauszeiger darüber bewegen? Das ist es!

Msgstr "Denken Sie daran, dass ältere Versionen des IE diese Pseudoklasse nicht in Bezug auf etwas anderes als den Tag a verstehen."

Oft wird diese Technik verwendet, um die untere Grenze für Links festzulegen, wenn Sie mit der Maus darüber fahren:

  a: hover {
  Rand unten: 1px durchgehend schwarz;
  }
 
"Mega-Cheat: Rand unten: 1px durchgehend schwarz; sieht besser aus als Textdekoration: Unterstrichen;"
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ (in IE6 funktioniert nur mit Links) 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nicht (Wahlschalter)

  div: nicht (#container) {
  Farbe: blau;
  }
 

Ablehnung kann auch sehr hilfreich sein. Angenommen, ich möchte alle divs mit Ausnahme des Identifier- Containers auswählen. Dafür ist ein negativer Code (ungleich) perfekt.

Wenn ich alle Elemente mit Ausnahme von Absatz-Tags auswählen muss, kann ich Folgendes schreiben:

  *: nicht (p) {
  Farbe: grün;
  }
 
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X :: pseudoElement

  p :: erste Zeile {
  Schriftgewicht: fett;
  Schriftgröße: 1.2em;
  }
 

Pseudo-Elemente können verwendet werden, um das Fragment eines Elements zu formatieren, z. B. die erste Zeile oder den ersten Buchstaben. Gilt nur für Blockelemente.

Wählen Sie den ersten Buchstaben des Absatzes:

  p :: Anfangsbuchstabe {
  Schwimmer: links;
  Schriftgröße: 2em;
  Schriftgewicht: fett;
  Schriftfamilie: Kursiv;
  Polsterung rechts: 2px;
  }
 

Dieser Code findet alle Absätze auf der Seite und wendet die angegebenen Stile auf den ersten Buchstaben der einzelnen Abschnitte an. Dies wird häufig verwendet, um einen Schlagzeileneffekt zu erzeugen.

Wählen Sie die erste Zeile des Absatzes aus:

  p :: erste Zeile {
  Schriftgewicht: fett;
  Schriftgröße: 1.2em;
  }
 

Ähnlich wie im vorherigen Beispiel, aber in diesem Fall wird die erste Zeile jedes Absatzes ausgewählt.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-te Kind (n)

  li: n-te Kind (3) {
  Farbe: rot;
  }
 

Erinnern Sie sich an die Zeiten, in denen wir keine Gelegenheit hatten, auf ein bestimmtes Nachkommen von Ordnungselementen zu verweisen? Diese Pseudoklasse löst dieses Problem!

Eine Ganzzahl wird als Parameter verwendet. Wenn Sie das zweite Element der Liste auswählen müssen, müssen Sie das Konstrukt: li: nth-child (2) verwenden .

Wir können sogar untergeordnete Elementgruppen auswählen. Um beispielsweise jedes vierte Element der Liste auszuwählen, müssen Sie das Konstrukt verwenden: li: nth-child (4n) .

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-te-letztes Kind (n)

  li: n-te-letztes Kind (2) {
  Farbe: rot;
  }
 

Was ist, wenn Sie eine große ungeordnete Liste haben und zum Beispiel das dritte Element vom Ende auswählen müssen. Anstatt li: nth-child (397) zu schreiben, können Sie die Pseudo-Klasse nth-last-child verwenden .

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-te des Typs (n)

  ul: nth-of-type (3) {
  Rand: 1px durchgehend schwarz;
  }
 

Manchmal gibt es Situationen, in denen Sie anstelle der Auswahl bestimmter Nachkommen eine Auswahl für den Elementtyp treffen müssen.

Stellen Sie sich vor, es gibt fünf ungeordnete Listen auf der Seite. Wenn Sie Stile nur für die dritte Liste anwenden müssen, diese aber keinen eindeutigen Bezeichner und keine anderen "Haken" hat, können Sie die Pseudoklasse (n) des n-ten Typs verwenden . Der obige Code zeigt eine Möglichkeit, nur die dritte ungeordnete Liste zu formatieren.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-ter-last-of-type (n)

  ul: n-te-last-of-type (3) {
  Rand: 1px durchgehend schwarz;
  }
 

Ja, um das Bild zu vervollständigen, gibt es eine solche Option. So können Sie das n-te Element eines bestimmten Typs am Ende auswählen.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: erstes Kind

  ul li: erstes Kind {
  Rand oben: keine;
  }
 

Mit dieser Pseudoklasse können Sie nur den ersten Nachkommen des übergeordneten Elements auswählen. Wird häufig verwendet, um die Grenzen des ersten und des letzten Listenelements zu entfernen.

Wenn Sie z. B. eine Liste mit Zeilen haben, von denen jede einen oberen Rand und einen unteren Rand aufweist , sind die letzten und ersten Elemente der Liste etwas außerhalb der allgemeinen Reihenfolge.

Um diesen Nachteil zu beseitigen, können Sie diese Pseudo-Klasse verwenden.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: letztes Kind

  ul> li: letztes Kind {
  Farbe: grün;
  }
 

Im Gegensatz zur Klasse first-child wählt last-child das letzte Element des übergeordneten Elements.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nur Kind

  div p: only-child {
  Farbe: rot;
  }
 

Ehrlich gesagt handelt es sich hierbei um eine selten verwendete Pseudoklasse, die aber auch nützlich ist. Damit können Sie die Elemente auswählen, die für ihre Eltern die einzigen Nachkommen sind.

In unserem Beispiel wird der Stil nur auf den Absatz angewendet, der der einzige Abkömmling des Div- Blocks ist.

Sehen wir uns dieses Markup zur Verdeutlichung an:

  <div> <p> Hier ist der einzige Absatz im Block. </ p> </ div>

  <div>
  <p> Hier ist der erste Absatz des Blocks. </ p>
  <p> Hier ist der zweite Absatz im Block. </ p>
  </ div>
 

In diesem Fall werden die Absätze im zweiten Block div nicht ausgewählt. Der Stil wird nur auf einen Absatz vom ersten div angewendet.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nur vom Typ

  li: nur vom Typ {
  Schriftgewicht: fett;
  }
 

Diese Pseudoklasse wählt Elemente aus, die keine Schwesterelemente in ihrem Container enthalten. Lassen Sie uns beispielsweise alle ul auswählen, die ein einzelnes li enthalten.

Sie könnten ul li schreiben, aber diese Methode wählt alle li- Elemente aus. Die einzige Möglichkeit ist die Verwendung von only-of-type .

  ul> li: nur vom Typ {
  Schriftgewicht: fett;
  }
 
Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: erster Typ

Diese Pseudo-Klasse ermöglicht es Ihnen, das erste gleichnamige Geschwister auszuwählen.

Um dies besser zu verstehen, kopieren Sie den folgenden Code in Ihren Editor:

  <div> <p> Hier ist ein Absatz. </ p> <ul> <li> Element 1. </ li> <li> Element 2. </ li> </ ul> <ul> <li> Element 3. < / li> <li> Element 4. </ li> </ ul> </ div> 

Versuchen Sie jetzt, ohne weiter zu lesen, nur "Element 2". Wenn Sie raten (oder sich ergeben), lesen Sie weiter.

Lösung 1

Es gibt viele Möglichkeiten, dieses Problem zu lösen. Betrachten Sie nur einige davon. Beginnen wir mit First-of-type :

  ul: first-of-type> li: n-te Kind (2) {
  Schriftgewicht: fett;
  }
 

In diesem Code heißt es: "Suchen Sie die erste ungeordnete Liste auf der Seite und suchen Sie dann nur deren direkte Nachkommen, die li-Elemente sind. Wählen Sie anschließend nur das zweite Element li in der Reihenfolge aus."

Lösung 2

Eine andere Option ist die Verwendung des benachbarten Selektors :

  p + ul li: letztes Kind {
  Schriftgewicht: fett;
  }
 

Hier finden wir ul , unmittelbar nach dem Absatz-Tag, und danach das jüngste untergeordnete Element.

Lösung 3

Sie können mit den Selektoren etwas mehr spielen und das tun:

  ul: first-of-type-li: n-te-letztes Kind (1) {
  Schriftgewicht: fett;
  }
 

Nun erhalten wir das erste ul- Element auf der Seite und suchen dann nach dem allerersten li- Element, aber vom Ende aus.

Kompatibilität:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

Fazit

Wenn Sie unter Berücksichtigung der Existenz von IE6 noch Code schreiben, müssen Sie bei der Verwendung neuer Selektoren äußerst vorsichtig sein. Aber machen Sie keine Entschuldigung, sagen Sie nicht, dass Sie das nicht wissen müssen - dadurch erschweren Sie sich das Leben.

Wenn Sie mit JavaScript-Bibliotheken arbeiten, beispielsweise mit jQuery, versuchen Sie immer, "native" CSS3-Selektoren zu verwenden, wenn dies möglich ist. In diesem Fall arbeitet Ihr Code schneller.

Memo-CSS-Selektoren

CSS-Selektoren werden täglich benötigt

Über codeharmony.ru