CSS-Selektoren

Mit CSS-Selektoren legt ihr fest, welche Bereiche im HTML-Code ausgewählt werden, damit ein Styling darauf angewendet werden kann. Die Kunst liegt u.a. darin, mit möglichst schlankem Code treffsicher die gewünschten Elemente auszuwählen.

Aktualisiert von 2012 – 2024 7 Kommentare

Damit Elemente auf einer Website gestaltet werden können, muss zunächst festgelegt werden welche Elemente angesprochen werden sollen. Mit Hilfe von CSS-Selektoren trefft ihr diese Auswahl. Um das passende Element auszuwählen gibt es viele verschiedene Selektoren für verschiedene Anwendungsbereiche. Wir beschreiben im Folgenden die wichtigsten CSS-Selektoren mit anschaulichen Beispielen.

Allgemeine Hinweise zu CSS-Selektoren

Der sog. Selektor ist Teil der CSS-Syntax. Als Selektor wird der Bereich der CSS-Regel bezeichnet, der vor den gewungenen Klammern steht.

selektor {
  eigenschaft: wert;
}

Wenn mehrere Selektoren die gleichen Eigenschaften erhalten sollen, notiert man die Selektoren nacheinander und trennt sie mit Komma.

selektor1, selektor2, selektor3 {
  eigenschaft: wert;
}

CSS ist »case sensitive«; es wird also zwischen Groß- und Kleinschreibung unterschieden. Darüber hinaus, solltet ihr Selektoren immer anhand ihrer Funktion und nicht anhand ihres Aussehens benennen. Das ermöglicht es euch später die Website umzugestalten, ohne dass die Selektoren unlogisch werden.

CSS-Selektoren werden vom W3C in Leveln (z.B. Level 3 oder Level 4) weiterentwickelt. Umso geringer das Level, desto besser ist i.d.R. auch der Browsersupport.

Einfache Selektoren

Die sog. »einfachen Selektoren« werden am häufigsten benötigt. Zu ihnen zählen:

Universalselektor: `*`

Das Stern-Zeichen (*) ist der Universalselektor. Er ermöglicht euch, alle Elemente auf der Website anzusprechen. Der Univeralselektor wird häufig für einen sogenannten CSS-Reset verwendet. In folgendem Beispiel erhalten alle Elemente einen 1 Pixel starke roten Rahmen.

* {
  border: 1px solid red;
}

Beispiel anschauen

Der Universalselektor ist Bestandteil der Level 2-Spezifikation des W3C.

Typselektor: `element`

Der Typselektor ist der Name des Elements das angesprochen werden soll. Mit dem Typselektor werden alle Elemente eines bestimmten Typs angesprochen. In folgendem Beispiel bekommen alle Links (<a>-Tags) einen roten Hintergrund und weiße Schriftfarbe.

a {
  background: red;
  color: white;
}

Beispiel anschauen

Der Typselektor ist Bestandteil der Level 1-Spezifikation des W3C.

Klassenselektor: `.class`

Der Klassenselektor spricht die Elemente an, die im HTML-Code mit einem bestimmten class-Attribut versehen worden sind. Der Klassenselektor wird im CSS-Code mit einem Punkt vor dem Klassennamen gebildet. Die Klassennamen sind frei wählbar, dürfen allerdings nicht mit einer Zahl beginnen.

In folgendem Beispiel bekommen alle Elemente mit der Klasse .lime einen hellgrünen Hintergrund und eine 2px starke grüne Umrandung.

.lime {
  background: lime;
  border: 2px solid green;
}

Beispiel anschauen

Der Klassenselektor ist Bestandteil der Level 1-Spezifikation des W3C.

ID-Selektor: `#id`

Der ID-Selektor spricht die Elemente an, die im HTML-Code mit einem bestimmten ID-Attribut versehen worden sind. Der ID-Selektor wird im CSS-Code mit einer Raute (#) vor dem ID-Namen gebildet. IDs dürfen auf einer Seite nur einmal vorkommen. ID-Namen sind wie Klassennamen frei wählbar. Im folgenden Beispiel bekommt das Element mit der ID #eyecatcher einen roten Hintergrund.

#eyecatcher {
  background: red;
}

Beispiel anschauen

Der ID-Selektor ist Bestandteil der Level 1-Spezifikation des W3C.

Attributselektoren

Der Attributselektor spricht Elemente anhand ihrer Attribute an. Beachtet dabei, dass es in HTML Attribute gibt, deren Werte vordefiniert sind. Bezieht euch daher am besten immer auf Attribute, die ihr selbst in den Quelltext geschrieben habt.
Es gibt folgende Attributselektoren im CSS:

Attributpräsenz: `[a]`

Elemente mit bestimmten Attributen könnt ihr mit einfachen Attributselektoren ansprechen. Ihr bildet ihn, indem ihr eckige Klammern ([a]) um den Namen des Attributs setzt. Im folgenden Beispiel werden alle Elemente die ein title-Attribut besitzen mit grüner Schrift versehen.

[title] {
  color: green;
}

Beispiel anschauen

Der Attributselektor (Attributpräsenz) ist Bestandteil der Level 2-Spezifikation des W3C.

Attributwert: `[a=v], [a~=v], [a|=v]`

Elemente mit bestimmten Attributen und Werten könnt ihr mit Hilfe der folgenden Angaben genau ansprechen.

Attribute mit festgelegtem Wert können mit einem Gleichheitszeichen (»=«) angesprochen werden [attributname=attributwert].
Um ein Attribut anzusprechen, das einen bestimmten Wert in einer Zeichenkette enthält, der mit Leerzeichen von den anderen Bestandteilen der Zeichenkette getrennt ist benutzt ihr zusätzlich eine Tilde (»~«) vor dem Gleichheitszeichen [attributname~=attributwert].
Sollte euer Wert am Anfang einer Zeichenkette stehen und durch einen Bindestrich vom Rest das Attributwerts getrennt sein muss vor dem Gleichheitszeichen eine Pipe (»|«) geschrieben werden [attributname|=attributwert].

Beginnt der Wert mit einer Ziffer oder besteht aus anderen Zeichen als Buchstaben, Ziffern, Binde- und Unterstrichen müsst ihr ihn in einfache oder doppelte Anführungszeichen setzen.

/* Elemente mit dem Attribut »type« die den Wert »submit« besitzen bekommen einen gelben Hintergrund */
[type=submit] {
  background: yellow;
}

/* Elemente mit dem Attribut »title« die den Wert »kulturbanause«, mit Leerzeichen getrennt, in der Zeichenkette beinhalten, werden blau geschrieben */
[title~=kulturbanause] {
  color: green;
}

/* Elemente mit dem Attribut »class« die den Wert »test«, am Anfang einer Zeichenkette haben und auf den ein Bindestrich folgt werden rot geschrieben */
class|=test] {
  color: red;
}

Beispiel anschauen

Der Attributselektor (Attributwert) ist Bestandteil der Level 2-Spezifikation des W3C.

Teilübereinstimmung: `[a^=v], [a$=v], [a*=v]`

Auch wenn nur Teilübereinstimmungen im Wert vorhanden sind, kann man diese Elemente ansprechen. Folgende Möglichkeiten gibt es:

Wenn das Attribut mit einer bestimmten Zeichenkette beginnt, schreibt ihr ein Zirkumflex (^) vor das Gleichheitszeichen [attributname^=attributwert].
Wenn das Attribut mit einer bestimmten Zeichenkette endet, schreibt ihr ein Dollarzeichen ($) vor das Gleichheitszeichen [attributname$=attributwert].
Wenn das Attribut eine bestimmte Zeichenkette enthält, schreibt ihr ein Sternzeichen (*) vor das Gleichheitszeichen [attributname*=attributwert].

Das folgende Beispiel zeigt das Ganze etwas genauer.

/* Elemente mit dem Attribut »href«, die mit »ftp://« beginnen, werden grün geschrieben */
[href^="ftp://"] {
color: green;
}

/* Elemente mit dem Attribut »href«, die mit ».pdf« enden, werden rot geschrieben */
[href$=".pdf"] {
color: red;
}

/* Elemente mit dem Attribut »href«, die »kulturbanause« in der Zeichenkette beinhalten, werden blau geschrieben */
[href*="kulturbanause"] {
color: gray;
}

Beispiel anschauen

Die Teilübereinstimmung von Attributselektoren ist Bestandteil der Level 3-Spezifikation des W3C.

Kombinatoren

Bei Kombinatoren werden zwei oder mehrere Selektoren miteinander verkettet. Dadurch wird eine Bedingung zwischen den einzelnen Selektoren gebildet.

Kindselektor: `e > f`

Der Kindselektor wählt alle direkten Kindelemente (f) vom Elternelement (e) aus. Im folgenden Beispiel bekommen alle <section>-Elemente die direkt im <article>-Element liegen einen roten Hintergrund.

article > section {
  background: red;
}

Beispiel anschauen

Der Kindselektor ist Bestandteil der Level 2-Spezifikation des W3C.

Nachfahrenselektor: `e f`

Der Nachfahrenselektor wählt alle Nachfahren (f) aus, die innerhalb des Elements (e) vorkommen. Im folgenden Beispiel bekommen alle <section>-Elemente die im <article>-Element liegen einen grünen Hintergrund.

article section {
  backgroud: green;
}

Beispiel anschauen

Der Nachfahrenselektor ist Bestandteil der Level 1-Spezifikation des W3C.

Nachbarselektor: `e + f`

Der Nachbarselektor wählt den Nachbarn (f) nur dann aus, wenn er direkt auf das Element (e) folgt, also der direkte Nachbar ist. Im folgenden Beispiel bekommen alle <aside>-Elemente die direkte Nachbarn eines <article>-Elements sind einen gelben Hintergrund.

article + aside {
  background: yellow;
}

Beispiel anschauen

Der Nachbarselektor ist Bestandteil der Level 2-Spezifikation des W3C.

Geschwisterselektor: `e ~ f`

Der Geschwisterselektor spricht alle nachfolgenden Geschwister (f) vom Element (e) an die auf der gleichen Ebene wie das Element (e) liegen. Im folgenden Beispiel bekommen alle nachfolgenden <aside>-Elemente, die auf der gleichen Ebene liegen wie das <article>-Element, einen blauen Hintergrund.

article ~ aside {
  background: blue;
}

Beispiel anschauen

Der Geschwisterselektor ist Bestandteil der Level 3-Spezifikation des W3C.

Pseudoelemente

Pseudoelemente sind zusätzliche Elemente, die formatiert oder mit Inhalt gefüllt werden können und nicht im HTML-Elementbaum vorhanden sind. Sie werden mit zwei Doppelpunkten (::) geschrieben, damit sie von Pseudoklassen unterschieden werden können.

::before, ::after

Die Pseudoelemente ::before und ::after erzeugen ein zusätzliches Element über CSS, vor oder nach dem angesprochenen Element. Im folgenden Beispiel wird ein grüner Text vor dem Element und ein roter Text nach dem Element eingefügt.
Einen ausführlichen Artikel zu diesen beiden Pseudoelementen findet ihr hier.

p::before {
  content: 'Ich bin vor dem Element ';
  color: green;
}

p::after {
  content: ' Ich bin hinter dem Element';
  color: red;
}

Beispiel anschauen

Die Pseudoelemente ::before und ::after sind Bestandteil der Level 2-Spezifikation des W3C.

::selection

Das Pseudoelement ::selection selektiert den vom Anwender im Browser markierten Text. Im folgenden Beispiel ist der markierte Text weiß und hat eine rote Hintergrundfarbe.
Einen ausführlichen Artikel zu diesem Pseudoelement findet ihr hier.

::selection {
  background: red;
  color: white;
}

Beispiel anschauen

Das Pseudoelement ::selection war Bestandteil in den Entwürfen der Level 3-Spezifikation des W3C, wurde allerdings wieder entfernt und taucht momentan in keiner Spezifikation auf.

::first-line

Das Pseudoelement ::first-line selektiert die erste Zeile. Im Beispiel wird die erste Zeile im Absatz fett und größer geschrieben.

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

Beispiel anschauen

Das Pseudoelement ::first-line ist Bestandteil der Level 1-Spezifikation des W3C.

::first-letter

Das Pseudoelement ::first-letter selektiert den ersten Buchstaben. Im Beispiel wird der erste Buchstabe im Absatz fett und rot geschrieben.

p::first-letter {
  font-weight: bold;
  color: red;
}

Beispiel anschauen

Das Pseudoelement ::first-letter ist Bestandteil der Level 1-Spezifikation des W3C.

Pseudoklassen

Mit Pseudoklassen können Elemente angesprochen werden, die eine bestimmte Eigenschaft besitzen. Pseudoklassen heißen so, da mit ihrer Hilfe mehrere Objekte gleichzeitig angesprochen werden können (wie mit Klassen), ohne dass jedoch ein class-Attribut im HTML-Code verwendet werden muss. Pseudoklassen werden durch den einfachen Doppelpunkt (:) gekennzeichnet.

:hover, :focus, :active

Diese Pseudoklassen beziehen sich auf verschiedene Interaktions-Zustände bei Elementen. Im Beispiel ist es wie folgt: Fährt man mit der Mouse über einen Link färbt dieser sich rot (hover). Ist der Link fokusiert, z. B. wenn man die Links mit der Tab-Taste durchläuft, ist er grün (focus). In dem Moment, wo man den Link betätigt, also wo er aktiviert wird, ist er für diesen Moment grau (active).

a:hover {
  color: red;
}

a:focus {
  color: green;
}

a:active {
  color: gray;
}

Beispiel anschauen

Die Pseudoklassen :hover und :focus sind Bestandteil der Level 2-Spezifikation des W3C, die Pseudoklasse :active ist Bestandteil der Level 1-Spezifikation des W3C.

:link, :visited

Diese Pseudoklassen kennzeichnen ob Links besucht wurden (:visited) oder nicht (:link).
In folgendem Beispiel sind alle nicht besuchten Links rot und alle besuchten Links grün geschrieben.

a:link {
  color: red;
}

a:visited {
  color: green;
}

Beispiel anschauen

Die Pseudoklassen :link und :visited sind Bestandteil der Level 1-Spezifikation des W3C.

:target

Die Pseudoklasse :target spricht Elemente an, die in der URL des Browsers angesprochen sind. In folgendem Beispiel werden diese Elemente mit einem gelben Hintergrund versehen.
Einen ausführlichen Artikel zu dieser Pseudoklassen findet ihr hier.

p:target {
  background: yellow;
}

Beispiel anschauen

Die Pseudoklasse :target ist Bestandteil der Level 3-Spezifikation des W3C.

:first-child

Die Pseudoklasse :first-child spricht das erste Kind-Element an. In folgendem Beispiel wird es mit roter Schrift versehen.

li:first-child {
  color: red;
}

Beispiel anschauen

Die Pseudoklasse :first-child ist Bestandteil der Level 2-Spezifikation des W3C.

:last-child

Die Pseudoklasse :last-child spricht das letzte Kind-Element an. In folgendem Beispiel wird es mit grüner Schrift versehen.

li:last-child {
  color: green;
}

Beispiel anschauen

Die Pseudoklasse :last-child ist Bestandteil der Level 3-Spezifikation des W3C.

:nth-child()

Mit dieser Pseudoklasse kann man ein oder mehrere bestimmte Kind-Elemente ansprechen. Es kann ein Zahlenwert, eine Berechnung oder die Angaben even (gerade) bzw. odd (ungerade) eingesetzt werden.

/* Der vierte Listenpunkt bekommt die Schriftfarbe blau */
li:nth-child(4) {
  color: blue;
}

/* Ab dem zweiten Listenpunkt bekommt jeder darauf folgende Dritte die Schriftfarbe rot */
li:nth-child(3n+2) {
  color: red;
}

/* Jeder grade Listenpunkt bekommt die Hintergrundfarbe grau */
li:nth-child(even) {
  background: lightgray;
}

Beispiel anschauen

Die Pseudoklasse :nth-child() ist Bestandteil der Level 3-Spezifikation des W3C.

:nth-last-child()

Bei dieser Pseudoklasse gelten die gleichen Bedingungen wie bei :nth-child(), nur das von hinten angefangen wird zu zählen.

/* Der viertletzte Listenpunkt bekommt die Schriftfarbe blau */
li:nth-last-child(4) {
  color: blue;
}

/* Ab dem vorletzten Listenpunkt bekommt jeder darauf folgende Dritte die Schriftfarbe rot */
li:nth-last-child(3n+2) {
  color: red;
}

/* Jeder grade Listenpunkt bekommt die Hintergrundfarbe grau */
li:nth-last-child(even) {
  background: lightgray;
}

Beispiel anschauen

Die Pseudoklasse :nth-last-child() ist Bestandteil der Level 3-Spezifikation des W3C.

:only-child

Die Pseudoklasse :only-child spricht ein Element an, wenn es das einzige Kind-Element ist. In folgendem Beispiel wird es mit roter Schrift versehen.

li:only-child {
  color: red;
}

Beispiel anschauen

Die Pseudoklasse :only-child ist Bestandteil der Level 3-Spezifikation des W3C.

:first-of-type

Die Pseudoklasse :first-of-type spricht das erste Element eines bestimmten Typen an. In folgendem Beispiel wird immer die erste Zelle in einer Tabellenreihe mit einem gelben Hintergrund versehen.

td:first-of-type {
  background: yellow;
}

Beispiel anschauen

Die Pseudoklasse :first-of-type ist Bestandteil der Level 3-Spezifikation des W3C.

:last-of-type

Die Pseudoklasse :last-of-type spricht das letzte Element eines bestimmten Typen an. In folgendem Beispiel wird immer die letzte Zelle in einer Tabellenreihe mit einem grünen Hintergrund versehen.

td:last-of-type {
  background: green;
}

Beispiel anschauen

Die Pseudoklasse :last-of-type ist Bestandteil der Level 3-Spezifikation des W3C.

:nth-of-type()

Mit dieser Pseudoklasse kann man ein oder mehrere Elemente eines bestimmten Typs ansprechen. Es kann ein Zahlenwert, eine Berechnung oder die Angaben even (gerade) bzw. odd (ungerade) eingesetzt werden.

/* Jede Zelle der zweiten Reihe in einer Tabelle wird mit einem grauen Hintergrund versehen. */
tr:nth-of-type(2) td {
  background: gray;
}

/* Ab der zweiten Tabellenzelle wird jede dritte darauf folgendeZelle rot geschrieben */
td:nth-of-type(3n+2) {
  color: red;
}

/* Jede Zelle einer ungeraden Reihe in einer Tabelle wird mit einem gelben Hintergrund versehen. */
tr:nth-of-type(odd) td {
  background: yellow;
}

Beispiel anschauen

Die Pseudoklasse :nth-of-type() ist Bestandteil der Level 3-Spezifikation des W3C.

:nth-last-of-type()

Bei dieser Pseudoklasse gelten die gleichen Bedingungen wie bei :nth-of-type(), nur das von hinten angefangen wird zu zählen.

/* Jede Zelle der vorletzten Reihe in einer Tabelle wird mit einem grauen Hintergrund versehen. */
tr:nth-last-of-type(2) td {
  background: gray;
}

/* Ab der vorletzten Tabellenzelle wird jede dritte darauffolgende aufsteigende rot geschrieben */
td:nth-last-of-type(3n+2) {
  color: red;
}

/* Jede Zelle einer ungeraden Reihe in einer Tabelle wird mit einem gelben Hintergrund versehen. */
tr:nth-last-of-type(odd) td {
  background: yellow;
}

Beispiel anschauen

Die Pseudoklasse :nth-last-of-type() ist Bestandteil der Level 3-Spezifikation des W3C.

:only-of-type

Die Pseudoklasse :only-of-type spricht ein Element an, wenn es das einzige Element eines bestimmten Typs ist. In folgendem Beispiel werden bei einer Tabelle mit nur einer Tabellenreihe die Tabellenzellen rot gefärbt.

tr:only-of-type td {
  background: red;
}

Beispiel anschauen

Die Pseudoklasse :only-of-type ist Bestandteil der Level 3-Spezifikation des W3C.

:root

Die Pseudoklasse :root spricht die Wurzel des Dokumentes an. In HTML-Dokumenten ist das der <html>-Tag. Im folgenden Beispiel wird mit Hilfe dieser Pseudoklasse die Schriftfarbe auf rot gesetzt.

:root {
  color: red;
}

Beispiel anschauen

Die Pseudoklasse :root ist Bestandteil der Level 3-Spezifikation des W3C.

:empty

Die Pseudoklasse :empty spricht leere Elemente an. Im folgenden Beispiel erhalten alle leeren Elemente einen roten Hintergrund. Leerzeichen gelten übrigens nicht als »empty«.

:empty {
  background: red;
}

Beispiel anschauen

Die Pseudoklasse :empty ist Bestandteil der Level 3-Spezifikation des W3C.

:not()

Die Pseudoklasse :not() in Verbindung mit einem einfachen Selektor als Argument, spricht alle Elemente an, auf die das Argument nicht zutrifft.
Im folgenden Beispiel werden alle Listenpunkte (li) die nicht die Klasse ».black« haben rot geschrieben.

li:not(.black) {
  color: red;
}

Beispiel anschauen

Die Pseudoklasse :not() ist Bestandteil der Level 3-Spezifikation des W3C.

:checked

Die Pseudoklasse :checked selektiert die Formularelemente Checkbox und Radio-Button danach, ob sie ausgewählt sind oder nicht. Im folgenden Beispiel erhält das ausgewählte Radio-Feld eine 2px starke, rote Umrandung.
Einen ausführlichen Artikel zum Thema Formular-Styling mit Hilfe dieser Pseudoklassen findet ihr hier.

input[type='radio']:checked {
  outline: 2px solid red;
}

Beispiel anschauen

Die Pseudoklasse :checked ist Bestandteil der Level 3-Spezifikation des W3C.

:required / :optional

Die Pseudoklassen :required und :optional selektieren Formularelemente danach, ob es sich um Pfichtfelder (required) oder um optionale Felder handelt.
Im Beispiel bekommen Pflichtfelder einen 1px starken roten Rahmen und optionale Felder einen 1px starken grauen Rahmen.

input:required {
  border: 1px solid red;
}

input:optional {
  border: 1px solid gray;
}

Beispiel anschauen

Die Pseudoklassen :required und :optional sind Bestandteile der Level 3-Spezifikation des W3C.

:disabled / :enabled

Die Pseudoklassen :disabled und :enabled selektieren Formularelemente danach, ob sie anwählbar (enabled) oder nicht anwählbar (disabled) sind.
Im Beispiel werden nicht anwählbare Felder ausgegraut und wählbare Felder bekommen einen grünen 1px starken Rahmen.

input:disabled {
  opacity: 0.5;
}

input:enabled {
  border: 1px solid green;
}

Beispiel anschauen

Die Pseudoklassen :disabled und :enabled sind Bestandteile der Level 3-Spezifikation des W3C.

:valid / :invalid

Die Pseudoklassen :valid und :invalid selektieren Formularelemente danach, ob die Eingaben gültig (valid) oder ungültig (invalid) sind.

Die Pseudoklassen :valid und :invalid sind Bestandteile der Level 4-Spezifikation des W3C.

:in-range / :out-of-range

Die Pseudoklassen :in-range und :out-of-range selektieren Formularelemente danach, ob die Eingabewerte in einem bestimmten Bereich liegen oder außerhalb.

Die Pseudoklassen :in-range und :out-of-range sind Bestandteile der Level 4-Spezifikation des W3C.

:read-only / :read-write

Die Pseudoklassen :read-only und :read-write selektieren, ob Formularelemente für den Benutzer beschreibbar sind oder ob er sie nur lesen darf.

Die Pseudoklassen :read-only und :read-write sind Bestandteile der Level 4-Spezifikation des W3C.

:matches

Mit der :matches-Pseudoklasse können alle Elemente angesprochen werden auf die ein bestimmter Selektor zutrifft. Diese Pseudoklasse ist Bestandteil der Level 4-Spezifikation des W3C.

p:matches(:first-child, .special) {
  color: red;
}

:any-link

Die :any-link-Pseudoklasse spricht alle Zustände eines Links an.

nav :any-link {
  background-color: yellow;
}

Diese Pseudoklasse ist Bestandteil der Level 4-Spezifikation des W3C.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Feedback & Ergänzungen – 7 Kommentare

Horst Schreiner

schrieb am 26.01.2021 um 14:25 Uhr:

Hallo,
danke für die gelungene und komprimierte Ersteinführung in CSS.
Wollte nur mak einen kurzen Überblick. Der ist Euch gelungen!
Gruß Horst
Antworten
Jörg

schrieb am 11.12.2017 um 10:30 Uhr:

Ganz hervorragend erklärt, vielen Dank für die Müheh die du dir gemacht hast.
Gibt es eine Möglichkeit (also einen Selektor) alle Seite anzusprechen AUSSER die Homepage?
LG
Jörg
Antworten
- Jonas Hellwig
  
  schrieb am 12.12.2017 um 19:30 Uhr:
  
  Hallo Jörg,
  wenn dein <body> auf der Startseite eine Klasse hat – z.B. .homepage – dann wäre es möglich.
  body:not(.homepage) { … }
  Antworten
  - Jörg
    
    schrieb am 13.12.2017 um 11:17 Uhr:
    
    Super!!!
    Vielen lieben Dank für deine Antwort, hat mich sehr gefreut.
René Philipp

schrieb am 30.09.2016 um 22:05 Uhr:

Schade, daß es neben ::first-line nicht auch noch ::last-line oder sogar ::nth-line() gibt. Denn könnte man nämlich den einzelnen Zeilen bei umbrechenden Bildern in einer Bildergalerie eventuell zusätzliche oder andere Formate geben.
Zur Zeit müßte man wohl per Jquery jeder Zeile ein oder ähnliches verpassen und bei Änderung des Browserfensters das Ganze auch noch irgendwie aktualisieren lassen. Das ist aber ziemlich unpraktisch. Ein Skript dafür ist ja auf https://codepen.io/jnowland/details/AifjK zu finden.
Aber ich finde die Seite https://css-tricks.com/a-call-for-nth-everything/ dazu interessant, obwohl sie schon von 2011 ist. Dort gibt es sogar noch weitere Ideen. Mal sehen, ob und wann davon etwas in die Browser eingebaut wird. Überflüssige Tags finde ich nämlich doof, nur weil CSS bestimmte Dinge nicht kann.
Antworten
Mirco

schrieb am 19.08.2015 um 21:38 Uhr:

Hi,
in der Einleitung ist ein kleiner Fehler unterlaufen:
Um das passende Element auszuwählen gibt -es- viele verschiedene Selektoren…
Ansonsten mal wieder ein toller Beitrag!
Gruß Mirco
Antworten
- Jonas Hellwig
  
  schrieb am 20.08.2015 um 08:53 Uhr:
  
  Hallo Mirco, Danke für die Info. Ist korrigiert.
  Antworten

Allgemeine Hinweise zu CSS-Selektoren

Einfache Selektoren

Universalselektor: *

Typselektor: element

Klassenselektor: .class

ID-Selektor: #id

Attributselektoren

Attributpräsenz: [a]

Attributwert: [a=v], [a~=v], [a|=v]

Teilübereinstimmung: [a^=v], [a$=v], [a*=v]

Kombinatoren

Kindselektor: e > f

Nachfahrenselektor: e f

Nachbarselektor: e + f

Geschwisterselektor: e ~ f

Pseudoelemente

::before, ::after

::selection

::first-line

::first-letter

Pseudoklassen

:hover, :focus, :active

:link, :visited

:target

:first-child

:last-child

:nth-child()

:nth-last-child()

:only-child

:first-of-type

:last-of-type

:nth-of-type()

:nth-last-of-type()

:only-of-type

:root

:empty

:not()

:checked

:required / :optional

:disabled / :enabled

:valid / :invalid

:in-range / :out-of-range

:read-only / :read-write

:matches

:any-link

Geschrieben von:

Jonas Hellwig

Robert Menzel

Raimund Büchner

Feedback & Ergänzungen – 7 Kommentare

Kommentar zu dieser Seite Antworten abbrechen

Falls du es verpasst hast

CSS-States für Buttons und Links →

CSS Cascade Layers – Kaskadenebenen statt Spezifität →

Projekte mit kulturbanause

Schulungen von kulturbanause

Universalselektor: `*`

Typselektor: `element`

Klassenselektor: `.class`

ID-Selektor: `#id`

Attributpräsenz: `[a]`

Attributwert: `[a=v], [a~=v], [a|=v]`

Teilübereinstimmung: `[a^=v], [a$=v], [a*=v]`

Kindselektor: `e > f`

Nachfahrenselektor: `e f`

Nachbarselektor: `e + f`

Geschwisterselektor: `e ~ f`