Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Webdesign » Diese CSS-Selektoren sollten Sie kennen

Diese CSS-Selektoren sollten Sie kennen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
Lesedauer: 6 Minuten
  • von Peter Müller
  • 2. April 2021

Das liegt unter anderem daran, dass der von CM-Systemen erzeugte Quelltext oft viele Klassen benutzt, die dann auch für das Styling genutzt werden. Dabei sind diese Selektoren unheimlich mächtige Werkzeuge, die dir viele Stunden Arbeit ersparen und die Code-Basis vereinfachen können.

1. Der Kindselektor > selektiert nur Kindelemente.

Nachfahrenselektoren sind weit verbreitet. ul li zum Beispiel selektiert alle Listenelemente innerhalb einer ungeordneten Liste.

Wenn man aber zwischen den beiden Typselektoren statt der Leerstelle ein >-Zeichen setzt, werden nicht mehr alle Nachfahren, sondern nur noch Kindelemente selektiert.

Kinder sind Elemente, die in der DOM-Hierarchie genau eine Stufe tiefer stehen. ul > li wählt also nur die Listenelemente der ersten Ebene aus. Die Leerstellen links und rechts vom Größer-als-Zeichen sind übrigens optional, machen die Sache aber besser lesbar.

Besonders in verschachtelten Listen wie Navigationen mit mehreren Ebenen ist der Kindselektor sehr praktisch, da man zum Beispiel Einrückungen für die unteren Ebenen nicht erst wieder zurücksetzen muss.

Folgender Selektor entfernt innerhalb einer Navigationsliste mit mehreren Ebenen das padding-left nur für die erste Ebene:

nav > ul { padding-left: 0; }

Die folgende Abbildung zeigt die Auswirkung dieses Selektors.

abbildung1-kindselektoren
Ein Kindselektor wählt nur die erste Ebene aus.

Ein herkömmlicher Nachfahrenselektor wie nav ul hätte die Einrückung auch für die verschachtelten Listen entfernt, die man dann mühsam wiederherstellen müsste.

2. Attributselektoren haben [eckige] Klammern

Der einfachste Attributselektor überprüft nur das Vorhandensein eines Attributs: a[title] selektiert alle Links mit dem Attribut title.

Mit einem Gleichheitszeichen kann man einen Attributselektor auf einen bestimmten Wert einschränken, was besonders in Formularen sehr nützlich ist. Hier zwei Beispiele:

input[type=”email”]
input[type=”submit”]

Das Gleichheitszeichen kann durch eine Tilde, ein Hütchen, ein Dollarzeichen oder Sternchen erweitert werden, die folgende Bedeutungen haben:

  • [attr^="zeichen"] = „zeichen“ am Anfang des Wertes
  • [attr$="zeichen"] = „zeichen“ am Ende des Wertes
  • [attr*="zeichen"] = „zeichen“ irgendwo im Wert

Dadurch gibt es besonders für Links einige interessante Möglichkeiten:

  • a[href^="http"] selektiert alle Links mit http am Anfang
  • a[href$=".pdf"] gestaltet alle Links auf PDF-Dateien
  • a[href*="wikipedia.org"] wählt alle Links zur Wikipedia

Fehlt nur noch die Tilde ~. Der Selektor [attr~="zeichen"] wählt alle Elemente, die in einem bestimmten Attribut unter anderem diesen Wert haben, und zwar mit einer Leerstelle davor und dahinter. Das ist besonders praktisch, wenn ein Attribut mehrere Werte hat, wie es zum Beispiel bei Klassen oft der Fall ist:

[class~="grid4"] selektiert alle Elemente mit der Klasse grid4, auch wenn Sie noch weitere Klassen enthalten, wie z. B. <div class="info grid4 box">.

3. Die Pseudoklassen :first-child und :last-child

Pseudoklassen heißen so, weil damit zwar wie mit einer Klasse eine Gruppe von Elementen ausgewählt wird, dabei aber im HTML das Attribut class nicht auftaucht.

Besonders nützliche Vertreter dieser Gattung sind :first-child und :last-child, mit denen das erste bzw. das letzte einer Reihe von Geschwistern ausgewählt werden.

So wird in Navigationslisten der erste und der letzte Menüpunkt oft etwas anders gestaltet. Im folgenden Beispiel bekommt zunächst jedes Listenelement rechts eine senkrechte Rahmenlinie:

nav li { border-right: 1px solid #ccc; }

Um dem ersten Listenelement auch links eine senkrechte Linie zu geben, bietet sich :first-child an:

nav li:first-child { border-left: 1px solid #ccc; }

Die folgende Abbildung zeigt dieses Beispiel im Browser:

abbildung2-first-child

Der Selektor :first-child fügt die erste Rahmenlinie hinzu.

:nth-child() ist der Zauberstab für Kinder

Mit Pseudoklassen können Sie wie eben gesehen ganz einfach das erste und das letzte Kind eines Elements ansprechen, aber das ist noch lange nicht alles, denn mit :nth-child() können Sie richtiggehend zaubern, was die Auswahl von Kindern angeht.

Der englische Ausdruck the nth child heißt frei übersetzt soviel wie „das xte Kind“ oder auch „das soundsovielste Kind“. Das „n“ ist ein Platzhalter für Ordnungszahlen wie first, second, third und so weiter.

Die Zaubertricks zum Auswählen von Kindelementen werden durch das Klammernpaar nach der Pseudoklasse möglich. Zunächst einmal kann man dort einfache ganze Zahlen notieren: :nth-child(2) wählt zum Beispiel das zweite Kind aus.

Mit :nth-child() können Sie zum Beispiel vier aufeinanderfolgende Listenelemente auswählen und ihnen eine unterschiedliche Hintergrundfarbe oder Hintergrundbilder zuweisen:

nav li:nth-child(1) { background-color: #058; }
nav li:nth-child(2) { background-color: #069; }
nav li:nth-child(3) { background-color: #07b; }
nav li:nth-child(4) { background-color: #08c; }
abbildung3-nth-child.jpg

;Die Pseudoklasse :nth-child() in Aktion
Die Klammern von :nthchild() können aber nicht nur Zahlen aufnehmen, sondern auch einfache Ausdrücke nach dem Muster :nth-child(an+b), wobei „a“ und „b“ für beliebige ganze Zahlen stehen. Die Möglichkeiten von :nth-child() tendieren gegen unendlich und zum Üben gibt es auf css-tricks.com ein sehr schönes Tool. Link siehe unten.

:nth-child() ist besonders bei Listen und Tabellen sehr nützlich, denn dort gibt es für ein Elternelement in der Regel viele gleichartige Kindelemente.

Die Pseudoklasse :target

Mit der Pseudoklasse :target kann man das Sprungziel eines Hyperlinks hervorheben. Ein sehr schönes Beispiel dafür findet sich in der Wikipedia. Wenn man dort auf ein hochgestelltes Fußnotenzeichen klickt, springt man zu der Fußnote auf derselben Seite weiter unten. Diese Fußnote wird mit der Pseudoklasse :target farblich hervorgehoben.

abbildung4-target

Die angeklickte Fußnote wird per :target hervorgehoben.
Der Link <a href="#cite_note-2">[2]</a> springt zu der Fußnote <li id="cite_note-2"> unten auf der Seite. Dadurch wird der Zusatz #cite_note-2 an das Ende der URL gehängt und das Element mit dieser ID durch das folgende CSS hervorgehoben:

ol.references > li:target { background: #def; }

Das Pfiffige an :target ist, dass das li-Element nur hervorgehoben wird, wenn vorher auf den Link geklickt wurde, der die ID des Listenelementes aufruft.

Mit dem geschickten Einsatz von :target kann man zum Beispiel CSS-only-Lösungen für mobile Navigationen oder Akkordeons erstellen. Hier geht es zum :nth Tester von CSS Tricks.

CSS-Attribut- und Wertselektoren

Wussten Sie, dass Sie Elemente nicht nur nach dem Namen des Attributs auswählen können, sondern auch nach dem Wert dieses Attributs? Ich selber wusste das lange Zeit nicht und habe lange Zeit nur CSS-Klassen und IDs verwendet.

So geht die Auswahl per CSS-Attribut

Angenommen, Sie möchten alle HTML-Tags auswählen, in denen das Attribut „Name“ enthalten ist:

<input name="email" value="" />

Das ist das CSS, das Sie brauchen:

input[name] {
/* styles */
}

Sie denken wahrscheinlich, dass dies ziemlich nutzlos ist, da fast alle Eingaben ein „Name“ -Attribut haben und mit Ihnen übereinstimmen.

Auswahl nach Attribut und Wert

Wenn Sie mehrere Websites erstellt haben, haben Sie wahrscheinlich Ihre eigenen Namenskonventionen für Tags entwickelt. In meinem Fall verwende ich bei jedem Kontaktformular name = ”email” für das E-Mail-Feld. Um dieses spezielle Feld zu formatieren, könnte ich ihm ein Klassenattribut mit dem Wert „email“ zuweisen. Warum nutze ich jedoch nicht eine bereits eingegebene Funktion, um alle Eingabetags mit dem Attribut „name“ mit CSS zu formatieren?

So würde das aussehen.

input[name=email] {
/* styles */
}

Diese Selektoren sind schon sehr praktisch, aber es geht noch besser.

Regex-Selektoren in CSS

Reguläre in CSS zu schreiben ist einfacher als Sie denken. Auch wenn Sie bisher noch keine regulären Ausdrücke verwendet haben, können Sie diese Art der Auswahl trotzdem problemlos beherrschen und lernen nebenher noch etwas Regex.

PDF-Dateien enden normalerweise mit „.pdf“, sofern sie nicht dynamisch generiert wurden. Mit dem folgendem CSS-Trick, können Sie jedem PDF-Link auf Ihrer Website ein PDF-Symbol hinzufügen.

Das Attribut, nach dem ich in diesem Fall suche, ist href und sein Wert endet mit „.pdf“.

a[href$='.pdf']{
 /* apply icon */
}

In regulären Ausdrücken markiert „$“ das Ende eines Strings. In CSS haben wir es also verwendet, um zu sagen, dass wir nur alle Links formatieren möchten, die mit „.pdf“ enden.

Ein weiteres Zeichen für reguläre Ausdrücke, das sehr häufig verwendet wird, ist das Zeichen „^“. Es kennzeichnet den Anfang einer Zeichenfolge. Verwenden wir dieses Zeichen, um Links mit dem Protokoll „https“ zu formatieren.

a[href^='https']{
/*style*/
}

Was wäre, wenn Sie alle PHP-Links formatieren möchten? Sie überlegen wahrscheinlich, das „$“ zu verwenden, das ich Ihnen gezeigt habe, da dies das Ende eines Strings markiert und Sie es für Erweiterungen verwenden können. Denken Sie jedoch daran, dass PHP-Links möglicherweise Parameter enthalten, sodass sie möglicherweise nicht mit der Erweiterung enden. Wir müssen das Sternchen „*“ verwenden, das Sternchen wird verwendet, um irgendwo in der Zeichenfolge nach einer bestimmten Zeichenfolge zu suchen und nicht nur am Anfang oder Ende.

a[href*='.php']{
/* styles here */
}

Sie können Regex auf andere Arten von Tags anwenden, nicht nur auf Ankertags.

 

Bonuspunkte gibt’s für: Datei-Upload-Buttons stylen mit dem Pseudo-Element ::file-selector-button

Mit dem folgenden Code kannst Du nun auch (ab Chrome 89) die Select- bzw. Datei hochladen Buttons stylen:

 input[type=file]::file-selector-button {
  background: #4e9d46;
  color: #fff;
  padding: 0.5em;
}

input[type=file]::file-selector-button:hover {
  background: #ee1d7a;
}
Peter Müller

Peter Müller

greift gerne trockene und komplizierte Sachverhalte auf und weiß sie einfach und unterhaltsam darzustellen.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

Haurand Webdesign WordPress Aaachen

Haurand Webdesign

Aachen

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Logo der Webdesign Agentur in Dresden mit Schriftzug DAZECON auf blauem Hintergrund.

DAZECON – Webdesign und Marketing

Dresden

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

11 Antworten

  1. fwolf sagt:
    27. November 2013 um 4:32 Uhr

    Ein exzellentes Hilfsmittel zum Durchtesten der nth-Pseudo-Selektoren (:nth-child, :nth-of-type, usw), hat CSS-Tricks gebaut: http://css-tricks.com/examples/nth-child-tester/
    cu, w0lf.

  2. Carsten sagt:
    7. November 2013 um 8:42 Uhr

    Danke für deinen informativen Beitrag, danke an Peter Müller für den Hinweis!
    Grüße

  3. Connie sagt:
    7. November 2013 um 8:11 Uhr

    die Illustrationen sind nicht immer so klar, vor allem bei first-child sieht man nicht, was gezeigt werden soll…
    ich finde die Attribute „odd“ und „even“ bei nth-child erwähnenswert, damit läßt sich auf einfachste Weise eine „Zebraliste“ erstellen…

    1. Peter Müller sagt:
      7. November 2013 um 15:46 Uhr

      Bei der Grafik ist ein bisschen unglücklich, dass der weiße Hintergrund fließend in den Beitrag selbst übergeht, aber der obere (Navi mit border-left) und der untere Teil (Devtool mit HTML und CSS) zusammen sind doch eigentlich deutlich, oder?
      Die Kurzformen stehen im Buch:
      :nth-child(2n) entspricht :nth-child(even)
      :nth-child(2n+1) entspricht :nth-child(odd)
      Ich habe sie im Artikel weggelassen, weil der eh schon zu lang war…

  4. Marcus sagt:
    7. November 2013 um 5:09 Uhr

    Die CSS Kind-Selektoren sollte man aber sehr sparsam verwenden, weil die Performance des Browser Renderings dadurch in die Knie geht. Deswegen haben wir die Selektoren damals einem Gurken-Browser IE5, IE6 erst recht nicht angetan… 😉

  5. Diddi sagt:
    6. November 2013 um 15:52 Uhr

    Danke fürs nochmalerinnern und die hintergrudninfos!

  6. Stephan sagt:
    6. November 2013 um 15:12 Uhr

    Hallo,
    bei Nummer 5 ist im beispielhaften Code ein Fehler zu finden: ol.references > li:target { backgroudn: #def; }
    Dort sind die Zeichen dn von background vertauscht.
    Ansonsten echt gut.

    1. Peter Müller sagt:
      6. November 2013 um 15:43 Uhr

      Danke für das Kompliment und den Hinweis. „backgroudn“ ist eine neue CSS-Eigenschaft mit der man den „Hintergrudn“ gestalten kann. Ich denke, dass wir den Tippfehler demnächstens mal fixen werden.

  7. Antoni sagt:
    6. November 2013 um 14:41 Uhr

    Echt genial vorallem mit dem NTH-CHILD() … dankeschön 🙂 ruhig mehr davon posten

    1. Peter Müller sagt:
      6. November 2013 um 21:12 Uhr

      Hallo Antoni,
      danke für das Kompliment. Mehr davon gibt’s in Kapitel 8 von „Flexible Boxes“. Den Link zur Infoseite findest du am Ende des Beitrags. In Kapitel 11 wird dann mit :target eine mobile Navigation entwickelt 😉

  8. Ewgeni Weiz sagt:
    6. November 2013 um 13:48 Uhr

    Vielen Dank für diesen Beitrag. Besondern die Pseudoklassen „:first-child“ und „nth-child()“ sind sehr interessant. Wie oft ich vergeblich versucht habe, ein vertikales Menü mit 1px als Border zu deklarieren. Endlich die Lösung!

Kommentare sind geschlossen.

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑