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 Gruppe von Elementen, auf die die angegebene Stilregel angewendet wird. Ein einfacher Selektor ist ein Typselektor, ein Klassenselektor oder ein ID-Selektor, gefolgt von Pseudo-Klassenselektoren und Attributselektoren (Letzteres wird in dieser kurzen Beschreibung nicht erwähnt). Ein Selektor ist eine Folge einfacher Selektoren, die durch Leerzeichen oder ">" und "+" Zeichen getrennt sind. Diese Begrenzer haben eine praktische Bedeutung beim Erstellen von Websites und sind für die Bequemlichkeit konzipiert.

Trotz der Tatsache, dass viele der hier genannten Selektoren Teil der CSS3-Spezifikation sind und dementsprechend nur von modernen Browsern unterstützt werden, sollten Sie diese dennoch lesen und im Gedächtnis behalten, da sie sehr praktisch sind.

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

Arten von Selektoren

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

Ein universeller Selektor , der mit dem Symbol * gekennzeichnet ist und verwendet wird, um die erforderlichen Eigenschaften aller Elemente auf der Seite zu ändern.

Klassen werden für Elemente mit dem Klassenattribut und dem erforderlichen Wert verwendet.

Bezeichner werden für Elemente mit dem Attribut id und dem erforderlichen Wert verwendet. Der Hauptunterschied zwischen Klassen aus Bezeichnern besteht darin, dass die Namen der zweiten Bezeichner eindeutig sein sollten und nicht wiederholt werden dürfen, sodass sie zusammen mit Skripten (JavaScript) verwendet werden können.

Pseudoklassen werden verwendet, um den Stil vorhandener Seitenelemente in Abhängigkeit von ihrem dynamischen Status zu ändern, z. B. beim Arbeiten mit Links ( : link ,: besucht ,: hover,: aktiv ,: Fokus ). Pseudo-Elemente definieren den Stil von Elementen, die in der Dokumentstruktur nicht eindeutig definiert sind ( : first-letter,: first-line ), und erlauben auch das Erzeugen und Stylen von nicht vorhandenem Inhalt ( : before ,: after und content property). In CSS3 beginnen Pseudoelemente mit zwei Doppelpunkten :: ( :: first-letter , :: first-line , :: before , :: after ).

Attributselektoren Lassen Sie das Element nicht nur nach dem Wert des Tags, sondern auch nach dem Wert des Attributs (a [attr]) stilisieren.

Kontext-Selektoren . Styling-Elemente, die sich in einem anderen Element befinden (ab).

Kinderselektoren . Ein Element unmittelbar nach dem anderen Element stylen und sein direkter Nachfolger sein (a> b).

Benachbarte Selektoren . Entwickelt für die Gestaltung benachbarter Elemente mit einem gemeinsamen übergeordneten Element. (a + b)

Verwandte Selektoren . Sie ähneln benachbarten Selektoren, jedoch mit dem Unterschied, dass alle benachbarten Elemente stilisiert sind, nicht nur das erste Nachbarelement. Zuerst erschien in CSS3. (a ~ b).

Also, lasst uns anfangen!

*

  * {
  Rand: 0;
  Auffüllen: 0;
  }
 

Beginnen wir mit den einfachsten Dingen für Anfänger, 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 zu "annullieren".

Außerdem kann das Zeichen * für die untergeordneten Elemente des Objekts verwendet werden.

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

Dieser Code zielt auf alle Elemente ab, die untergeordnete Elemente der Container-ID sind.

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

#X

  #container {
  Breite: 960px;
  Rand: Automatisch;
  }
 

Das Gittersymbol ermöglicht es uns, Elemente anhand des Identifikators auszuwählen. Dies ist eine der gebräuchlichsten Methoden zum Auswählen von Elementen, aber seien Sie vorsichtig, wenn Sie sie verwenden.

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

ID-Selektoren sind unflexibel und in verschiedenen Projekten schwer wiederzuverwenden. Wenn möglich, versuche zuerst den Tag-Namen oder sogar eine Pseudo-Klasse.

Kompatibilität:
Internet Explorer Chrome Oper 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.

Andernfalls verwende die ID, um die "Nadel im Heuhaufen" zu finden und den Stil nur auf ein bestimmtes Objekt anzuwenden.

Kompatibilität:
Internet Explorer Chrome Oper 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ächste häufig verwendete Selektortyp ist der Kinderselektor. Es sollte verwendet werden, wenn mehr Elemente ausgewählt werden müssen.

Zum Beispiel, was zu tun ist, wenn Sie nicht alle Link-Tags auswählen müssen, sondern nur diejenigen, die sich in der ungeordneten Liste befinden? Dies ist nur der Fall, wenn Sie den Kindselektor verwenden sollten.

"Tipp: Wenn Ihr Selector ähnlich zu XYZA B.error ist, dann tun Sie wahrscheinlich etwas daran.) Fragen Sie sich immer, ist das wirklich der einfachste Weg zu"
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X

  a {Farbe: rot;}
  ul {margin-left: 0px;}
 

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

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

X: besucht und X: verlinkt

  a: link {farbe: rot;}
  a: besucht {farbe: violett;}
 

Hier verwenden wir den Pseudo-Klasse: Link, um alle Links auszuwählen, auf die noch nicht geklickt wurde.

Außerdem gibt es eine Pseudoklasse: visited, die es uns erlaubt, den Stil nur auf die Links anzuwenden, die angeklickt oder umgeleitet wurden.

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

X + Y

  ul + p {
  Farbe: rot;
  }
 

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

Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
7+ 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 ist, dass der letztere nur direkte Nachkommen auswählt. Betrachten Sie das folgende Beispiel:

  <div id = "Container">
  <ul>
  <li> Listenelement
  <ul>
  <li> Deszendent </ li>
  </ ul>
  </ li>
  <li> Listenelement </ li>
  <li> Listenelement </ li>
  <li> Listenelement </ li>
  </ ul>
  </ div>
 

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

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

X ~ Y

  ul ~ p {
  Farbe: rot;
  }
 

Diese Kombination von Schwesterelementen (Geschwisterelementen) ähnelt X + Y , ist jedoch weniger streng. Wenn in dem Fall ul + p nur die ersten Elemente von p, die auf ul folgen, ausgewählt werden (dh es gibt eine Nachbarschaft in der Auswahl), dann ist der Selektor, den wir jetzt betrachten, allgemeiner.

In unserem Fall wird es alle Elemente von p nach ul auswählen.

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

X [Titel]

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

Hier beziehen wir uns auf das Attribut selector. In unserem Beispiel werden nur Links mit dem title-Attribut grün gefärbt.

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

X [href = "foo"]

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

Der Code oben gibt den Stil an alle Links, deren href-Attribut http://www.codeharmony.ru ist. Diese Links werden rot sein. Der Rest der Links wird diesen Stil nicht erhalten.

Das funktioniert gut, aber es ist ein wenig unflexibel. Was ist, wenn der Link tatsächlich zu Codeharmony.ru führt, aber vielleicht ist die Adresse als codeharmony.ru und nicht http://www.codeharmony.ru angegeben? In solchen Fällen können wir die Grundlagen regulärer Ausdrücke verwenden.

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

X [href * = "Codeharmonie"]

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

Lass uns weiter gehen; Genau das brauchen wir. Ein Sternchen bedeutet, dass der gewünschte Wert in einem beliebigen Teil des href- Attributs enthalten sein kann. So können wir wählen und http://www.codeharmony.ru und www.codeharmony.ru und codeharmony.ru.

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

X [href ^ = "http"]

  a [href ^ = "http"] {
  Hintergrund: URL (Pfad / zu / extern / Icon.png) keine Wiederholung;
  padding-left: 10px;
  }
 

Haben Sie schon einmal darüber nachgedacht, wie auf einigen Sites neben Links zu anderen Sites (außerhalb des aktuellen) kleine Icons erscheinen, die den Nutzer darüber informieren? Dies sind hervorragende "Erinnerungen" an den Benutzer, dass der Link zu einer anderen Website führt.

Dies geschieht mit dem Symbol ^ (Karat) . Es wird häufig in regulären Ausdrücken verwendet, um den Beginn einer Zeichenfolge anzugeben. Wenn wir Links auswählen möchten, deren href-Attribut mit http beginnt, können wir den Selektor aus dem obigen Beispiel verwenden.

"Beachten Sie, dass wir nicht nach http suchen: // Dies ist optional und berücksichtigt darüber hinaus nicht die https: // Links."
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
7+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X [href $ = ".Jpg"]

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

Auch hier verwenden wir den regulären Ausdruck und das Zeichen $ , um das Ende der Zeichenfolge zu bezeichnen. In diesem Beispiel suchen wir nach allen Links, die sich auf Bilder mit der Erweiterung .jpg beziehen. Dieser Ansatz funktioniert natürlich nicht für Bilder mit den Erweiterungen .gif , .png usw.

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

X [Daten - * = "foo"]

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

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

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

Aber das ist trostlos und nicht elegant. Eine weitere Möglichkeit besteht darin, einen eigenen Attributdaten -Dateityp zu erstellen und ihn zu jedem Link hinzuzufügen, der zum Bild führt.

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

Dabei können wir den Code für dieses Beispiel verwenden:

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

X [foo ~ = "bar"]

  a [Daten-Info ~ = "Extern"] {
  Farbe: rot;
  }

  a [Daten-Info ~ = "Bild"] {
  Rand: 1px durchgehend schwarz;
  }
 

Hier ist ein weiterer interessanter Trick, den nicht jeder kennt. Mit dem Zeichen ~ (Tilde) können wir Attribute mit Werten auswählen, die durch Leerzeichen getrennt sind, d. H.

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

Mit dieser Technik können wir Selektionen mit den notwendigen Kombinationen treffen:

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

  / * und wähle das Attribut data-info, das den Wert von image * / enthält
  a [Daten-Info ~ = "Bild"] {
  Rand: 1px durchgehend schwarz;
  }
 
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
7+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: überprüft

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

Diese Pseudo-Klasse wählt diejenigen Elemente aus, die markiert wurden, z. B. ein Optionsfeld oder ein Kontrollkästchen.

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

X: nach

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

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

Diese Pseudoklasse ermöglicht es Ihnen, Inhalt um das ausgewählte Objekt herum zu generieren.

Dieses Beispiel zeigt, wie die Pseudo-Klasse verwendet wird : Nach dem Block mit der Klasse .clearfix wird eine leere Zeichenfolge erstellt und dann gelöscht. Eine gute Methode, wenn Sie keinen Überlauf anwenden können : versteckt .

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

X: schweben

  div: schweben {
  Hintergrund: # e3e3e3;
  }
 

Das weißt du sicher. Der offizielle Name klingt wie eine "Pseudoklasse basierend auf Benutzeraktionen". Es klingt beängstigend, obwohl in Wirklichkeit alles einfach ist. Möchten Sie einen bestimmten Stil auf ein Element anwenden, wenn der Mauszeiger darauf steht? Das ist es!

"Denken Sie daran, dass die alten Versionen von IE diese Pseudo-Klasse in Bezug auf irgendetwas außer dem Tag a nicht verstehen."

Diese Technik wird häufig verwendet, um die untere Grenze für Verknüpfungen festzulegen, wenn Sie den Mauszeiger darüber bewegen:

  a: schweben {
  border-bottom: 1px durchgehend schwarz;
  }
 
"Mega-Cheat: Grenze-Boden: 1px solid schwarz; sieht besser aus als Text-Dekoration: unterstreichen;"
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
6.0+ (in IE6 funktioniert es nur in Bezug auf Links) 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: nicht (Selektor)

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

Ablehnung kann auch sehr nützlich sein. Angenommen, ich möchte alle Div- Blöcke außer einem mit der Container- ID auswählen. Dafür ist der Code mit der Negation (ungleich) in Ordnung.

Wenn ich alle Elemente außer den Absatz-Tags auswählen muss, kann ich folgendes schreiben:

  *: nicht (p) {
  Farbe: grün;
  }
 
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
9+ 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 stylen, z. B. die erste Zeile oder den ersten Buchstaben. Gilt nur für Blockelemente.

Wir wählen den ersten Buchstaben des Absatzes:

  p :: erster Buchstabe {
  schweben: links;
  Schriftgröße: 2em;
  Schriftgewicht: fett;
  Schriftfamilie: kursiv;
  Padding-rechts: 2px;
  }
 

Dieser Codeabschnitt findet alle Absätze auf der Seite und wendet die angegebenen Stile auf den ersten Buchstaben jedes dieser Codes an. Oft wird dies verwendet, um einen "Schlagzeilen" -Effekt zu erzeugen.

Wir wählen die erste Zeile des Absatzes:

  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 Oper Safari Firefox Android iOS
6.0+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-Kind (n)

  li: nth-kind (3) {
  Farbe: rot;
  }
 

Erinnern Sie sich an die Zeiten, in denen wir nicht auf ein bestimmtes Element der nachkommenden Ordnung verweisen konnten? Diese Pseudoklasse löst dieses Problem!

Der Parameter ist eine Ganzzahl. Wenn Sie das 2. Element in der Liste auswählen möchten, müssen Sie das Konstrukt verwenden: li: nth-child (2) .

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

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

X: n-ten-letzten-Kind (n)

  li: nth-last-kind (2) {
  Farbe: rot;
  }
 

Was ist, wenn Sie eine große ungeordnete Liste haben und Sie zum Beispiel das dritte Element am 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 Oper Safari Firefox Android iOS
9+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: n-Typ (n)

  ul: n-Typ (3) {
  Rand: 1px durchgehend schwarz;
  }
 

Manchmal gibt es Situationen, in denen Sie, anstatt bestimmte Nachkommen zu wählen, eine Auswahl nach dem Typ des Elements treffen müssen.

Stellen Sie sich vor, es gibt fünf ungeordnete Listen auf der Seite. Wenn Sie Styles nur auf die dritte Liste anwenden müssen, aber keine eindeutige Kennung und andere "Hooks" haben, können Sie die Pseudo-Klasse nth-of-type (n) verwenden . Der obige Code zeigt, wie der Stil nur der dritten ungeordneten Liste zugewiesen wird.

Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
9+ 1,0+ 1,0+ 1,0+ 1,0+ 1,0+

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

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

Ja, der Vollständigkeit halber gibt es eine solche Option. So können Sie am Ende das n-te Element eines bestimmten Typs auswählen.

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

X: erstes Kind

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

Mit dieser Pseudoklasse können Sie nur das erste untergeordnete Element des übergeordneten Elements auswählen. Es wird oft verwendet, um die Grenzen des ersten und letzten Elements der Liste zu löschen.

Wenn Sie z. B. eine Liste von Zeilen haben, von denen jede den Rand oben und unten hat , sind die letzten und ersten Elemente der Liste geringfügig außerhalb der allgemeinen Reihenfolge.

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

Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
7+ 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 First-Child- Klasse wählt last-child das letzte Element des Elternelements.

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

X: einziges Kind

  div p: Nur-Kind {
  Farbe: rot;
  }
 

Ehrlich gesagt, ist dies eine ziemlich selten verwendete Pseudo-Klasse, aber es ist auch nützlich. Es ermöglicht Ihnen, diejenigen Elemente auszuwählen, die die einzigen Nachkommen für Ihre Eltern sind.

In unserem Beispiel wird der Stil nur auf den Absatz angewendet, der das einzige Kind des div- Blocks ist.

Betrachten wir zur Verdeutlichung ein solches Markup:

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

  <div>
  <p> Hier kommt der erste Absatz im Block. </ p>
  <p> Hier kommt der zweite Absatz im Block. </ p>
  </ div>
 

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

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

X: Nur-von-Typ

  li: Nur-von-Typ {font-weight: bold;  } 

Diese Pseudoklasse wählt Elemente aus, die keine Schwesterelemente in dem Container enthalten, der sie enthält. Wählen wir zum Beispiel alle ul aus , die ein einzelnes li enthalten.

Sie könnten ul li schreiben, aber diese Methode wählt alle li- Elemente aus. Die einzige Möglichkeit besteht darin, nur einen Typ zu verwenden .

  ul> li: Nur-von-Typ {
  Schriftgewicht: fett;
  }
 
Kompatibilität:
Internet Explorer Chrome Oper Safari Firefox Android iOS
9+ 1,0+ 3,5+ 1,0+ 1,0+ 1,0+ 1,0+

X: Ersttyp

Mit dieser Pseudoklasse können Sie das erste gleichgeordnete Element desselben Typs auswählen.

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

  <div>
  <p> Hier ist der Absatz. </ p>
  <ul>
  <li> Element 1. </ li>
  <li> Element 2. </ li>
  </ ul>

  <ul>
  <li> Element 3 </ li>
  <li> Element 4. </ li>
  </ ul>
  </ div>
 

Jetzt, ohne weiter zu lesen, versuchen Sie, den Stil nur "Element 2" zu geben. Wenn Sie raten (oder aufgeben), lesen Sie weiter.

Lösung 1

Es gibt viele Möglichkeiten, dieses Problem zu lösen. Betrachten Sie nur einige von ihnen. Beginnen wir mit dem Einsatz von First-of-Type :

  ul: erster-Typ> li: nth-child (2) {
  Schriftgewicht: fett;
  }
 

Dieser Code sagt: "Finden Sie die erste ungeordnete Liste auf der Seite, dann suchen Sie nur ihre direkten Nachkommen, die Elemente von li sind. Danach wählen Sie nur das zweite Element in der Reihenfolge li."

Lösung 2

Eine weitere Option ist die Verwendung des benachbarten Selektors :

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

Hier finden wir ul , das unmittelbar nach dem Tag des Absatzes folgt, nach dem wir das letzte Kindelement davon finden.

Lösung 3

Sie können ein wenig mehr mit den Selektoren spielen und dies tun:

  ul: Ersttyp li: nth-last-child (1) {
  Schriftgewicht: fett;
  }
 

Jetzt bekommen wir schon das erste ul- Element auf der Seite, dann suchen wir nach dem allerersten li- Element, aber vom Ende her.

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

Fazit

Wenn Sie immer noch Code schreiben und die Existenz von IE6 berücksichtigen, müssen Sie sehr vorsichtig sein, wenn Sie neue Selektoren verwenden. Aber mache diese Entschuldigung nicht, sag nicht, dass du es nicht wissen musst - das verkomplizierst du dein Leben.

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

CSS-Auswahlmemo

CSS-Selektoren für jeden Tag benötigt

Über codeharmony.ru