CSS Selektoren Level 4

26.052015

CSS Selektoren Level 4

Mike
Kategorien: Allgemein, Frontend Entwicklung

Heute zeige ich euch eine kleine Vorschau auf die neuen Selektoren in CSS. Sachen, die wir uns Frontendler schon vor Jahren gewünscht haben. Also legen wir los.

Der ! Selektor

Fangen wir mit den für mich sinnvollsten Seketor an. Den sogenanten parent Selektor. Wo wir früher mit jQuery uns ein Eltern-DIV selektiert haben, können wir nun mit einem einfachen Ausrufezeichzen "!" in der Selektorenkette das zu stylende Objekt definieren. Schauen wir uns das mal an einem Konkreten Besipiel an:

ul li! a.active {
   color: red;
}

Hier wird nicht etwa der Link mit der Klasse active selektiert sondern das Eltern-li-Element.

Hier noch ein Beispiel:

body! header a.redBG:hover {
   background: red;
}

Hier haben wir im header-Element ein Link , und wenn man mit der Maus drüberfährt kann man den gesamten Dokument den Hintergrund einfärben. Man stelle sich nur die neuen Möglichkeiten vor!!

:matches und :not

Hier stelle ich euch eine Erweiterung der Pseudoklasse ":not", und eine der neuen Pseudoklassen ":matches" vor. Hier ein Beispiel wie man früher ein h1 Element selektiert hat und darunter gleich der selbe Selektor mit der neuen Pseudoklasse ":matches":


section h1,
article h1,
aside h1 {
   color: red;
}
/* ist das selbe wie */
:matches(section, article, aside) h1 {
    color: red;
}

oder

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
   color: red;
}
/* ist das selbe wie */
ul.menu li a:matches(:link, :hover, :visited, :focus) {
   color: red;
}

Kommen wir nun zu der Erweiterung des Negierung-Selektors ":not". In Level 4 können wir nun in (Komma getrennt) mehre Selektoren z.B. Klassen definieren die nicht selektiert werden sollen.

p:not(.active, .visible) {
   color: red;
}

:any-link und :local-link

Mit der Pseudoklasse :any-link kann man jeglichen Link ob besucht oder nicht gleich stylen:

a:link,
a:visited {
   color: red;
}
/* ist das selbe wie */
a:any-link {
   color: red;
}

Als zweites und letztes stelle ich euch den "local-link" vor. diese Pseudoklasse ohne weiteren Parameter wird aktiv, innerhalb der selben Domain.

nav :local-link {
   text-decoration: none;
}

Alle lokalen Links bekommen keine Text-Dekoration wie meinst "underline". Setzt man nun noch eine Zahl als Parameter kann man ganz einfach nach der Struktur der Internetseite die Breadcrumps stylen:

nav :local-link(0) {
   color: red;
}
nav :local-link(1) {
   color: green;
}
nav :local-link(2) {
   color: blue;
}
nav :local-link(3) {
   color: yellow;
}
nav :local-link(4) {
   color: gray;
}

Dabei gilt, dass die Zahl "0" die Homepage also www.joocom.de repräsentiert. Dieser würde dann die Textfarbe rot bekommen. Der Link auf die Unterseite www.joocom.de/blog.html würde dem entsprechend grün sein. Und der Link auf den Beitrag hier www.joocom.de/blog/css-selektoren-level-4 blau.

Fazit

Leider werden die meisten Selektoren von den gängigen Browsern noch nicht unterstürzt. Selbst der Zukunftsweisende Chrome Browser von Google geht nicht mit positiven Beispiel voran. Wer allerdings an allen CSS Level 4 Selektoren interessiert ist, kann sich beim W3C oder auf CSS4-Rocks alle anschauen.

Blog