Attribut-Selektoren

Du kannst HTML-Elemente auch anhand ihres Attributs ansprechen. Zur Erinnerung: Attribute geben zusätzliche Informationen zu einem HTML-Element und stehen immer im Start-Tag. Wenn du also z.B. einen Link ansprechen willst, kannst du ihn über sein href=““ Attribut erreichen.

   
Attribut-Selektoren
   Link

Um das Attribut über CSS anzusprechen, muss du nur den Attributnamen in eckige Klammern schreiben. Also, so:

[href] {
   color: red;
}

Oder auch so. So erreichst du nur die Link-Tags mit einem href Attribut:

a[href] {
   color: red;
}

Es gibt auch den Attribut-Wert-Selektor, mit dem du alle Tags mit einer bestimmten Kombination aus Attribut und Wert ansprechen willst. Zum Beispiel alle Links die sich in einem neuen Tag öffnen. Wie dieser hier:

   
Attribut-Selektoren
   Link

Diesen würdest du per Attribut-Wert-Selektor entsprechend folgendermaßen erreichen.

a[target="_blank"] {
   color: blue;
}

Also erst der Element-Selektor a und dahinter in eckigen Klammern das Attribut und dessen Wert.
Damit sprichst du alle a Tags an, die das Attribut href mit dem Wert _blank haben.

Ein typische Besipiel für die Nutzung von Attribut-Selektoren sind Formular-Elemente, die per se alle ein input Element sind. Um diese anzusprechen könntest du diese per Attribut-Wert-Selektor ansprechen, z.B. mit input[type=“radio“] oder input[type=“checkbox“].

Es gibt noch einige spezifischere Möglichkeiten Attribute zur Selektion zu verwenden, aber dies kommt in der Praxis so selten vor, dass ich hier nicht weiter darauf eingehen will. Falls du dich tiefer gehend damit befassen willst, habe ich einen entsprechenden Artikel in der Infobox verlinkt.

Pseudo-Klassen und Pseudo-Elemente

Es gibt sogenannte Pseudo-Klassen und Pseudo-Elemente. Dabei handelt es sich um keine tatsächlichen HTML-Elemente, sondern auf solche, die durch Interaktion mit der Website entstehen. Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu definieren. Sicherlich kennst du den Effekt, das sich Elemente verändern, wenn du mit der Mouse über sie fährst, ein sogenanntes Hovern. Erzeugen wir doch dieses Verhalten gemeinsam.

Pseudo-Klassen und Pseudo-Elemente werden mit dem Element und dann einem Doppelpunkt bei Pseudo-Klassen oder zwei Doppelpunkten bei Pseudo-Elementen geschrieben. Auf den Doppelpunkt folgt dann das Pseudonym. In dem Fall erst ein Element-Selektor für ein a Tag und darauffolgend dann ein Doppelpunkt und dann die Pseudo-Klasse hover, um den entsprechenden Effekt beim Hovern zu erzeugen.

a:hover {
   color: red;
}

Wollen wir also, dass dieses div die Farbe wechselt beim Hovern, funktioniert dies folgendermaßen.
Wir erzeugen zuerst ein Div mit einer Höhe, Breite und Hintergrundfarbe.
Dann schreiben wir Styles für den Hover-State und ändern darin die Farbe. Im Browser siehst du dann, dass die Hintergrundfarbe sich beim Hovern entsprechend verändert.

.box {
   height: 100px;
   width: 100px; 
   background: lightgray;
}

.box:hover {
   height: 100px;
   width: 100px; 
   background: green;       
}

Ein weiteres Beispiel für eine Pseudo-Klasse bei Links. Damit kannst du unterschiedliche Zustände eines Links stylen. Beispielsweise ein noch nicht angeklickter Link, ein bereits angeklickter Link und ein aktiver Link (also die Seite, auf der du dich gerade befindest.)

a:link {
   color: black;  
}

a:visited {
   color: green;  
}

a:active {
   color: red;  
}

Mit der Pseudo-Klasse :link sprichst du den noch nicht angeklickten Link an, mit :visited den bereits angeklickten Link und mit :active den aktuellen Link bzw. die aktuell sichtbare Seite.

Beispiele für typische Pseudo-elemente sind p::after und p::before. p::after fügt Inhalt nach beispielsweise einem p-Tag ein. p::before fügt Inhalt vor beispielsweise einem p-Tag ein.

Ein p-Tag
Noch ein P-Tag

Hinter beiden p-Tags wird nun das Wort „Wichtig!“ eingefügt. Dies wird in der Praxis häufig verwendet, um Icons einzufügen.

Wenn du dich ein wenig mehr mit Pseudo-Klassen und Pseudo-Elementen beschäftigen willst, habe ich eine Liste erstellt und in der Infobox verlinkt, welche alle Pseudo-Klassen und Pseudo-Elementen listet.

:not-Pseudo-Selektor

Wenn du dir die Liste einmal angesehen hast, wirst du sicher auf den :not«-Pseudo-Selektor gestoßen sein.
Dieser wählt alle Elemente aus, die nicht ein bestimmtes Element sind. So kannst su zum Beispiel allen Überschriften, die keine h1 sind, mit nur einer Zeile CSS eine weniger dicke Schrift zuordnen.

Eine h1
keine h1

Es gibt, wie du in der Liste gesehen hast, viele weitere Pseudo-Selektoren und -Klassen. Es macht sicher Sinn, dass du dich damit mal ein wenig beschäftigst. In der Praxis weißt du dann, dass es diese sehr spezifischen Selektoren gibt und kannst die Liste nutzen, um sie korrektu zu verwenden. Eventuell gehe ich im Bonus-Material zum Kurs später weiter auf einzelne Beipsiele ein. Wie du vielleicht noch aus dem HMTL-Kurs weißt, füge ich allen Kursen nach und nach Bonus-Videos hinzu, um den Kurs für dich laufend spannend zu halten.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.