Mit :not ganz einfach externe Links kennzeichnen

Externe Links sichtbar machen mit CSS3
Externe Links sichtbar machen mit CSS3

Externe Links besonders hervorzuheben ist eine sehr nette Geste an seine Leser und Leserinnen. Dies konnte man immer schon mit CSS realisieren, der Aufwand dafür war jedoch enorm. Ich möchte heute die Pseudo-Klasse :not in Erinnerung rufen da sie einige nette Möglichkeiten mit sich bringt.

Ich bringe den Browsersupport und drei Praxisbeispiele mit der Pseudo-Klasse :not.

Browsersupport der CSS3 Pseudo-Klasse :not

Alle modernen Browser kennen sie und stellen sie korrekt dar.

Da Microsoft im April 2014 endgültig den Support für Windows XP einstellt wird dann auch der IE 8 bald der Geschichte angehören und somit stehen viel mehr CSS3 Selektoren zur Gestaltung zur Verfügung.

Was kann die Pseudo-Klasse :not

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
w3.org

Dies bedeutet, dass man mit der Pseudo-Klasse :not gezielt alles ansprechen kann was man „nicht meint“.
Die Grenzen dieser Pseudoklasse sind auch sehr einfach: man kann sie nicht verschachteln.

Zuerst zwei einfache Beispiele und dann das Hervorheben der externen Links mit dieser Pseudo-Klasse.

Beispiel 1 mit :not

Alles im folgenden DIV mit der Klasse notex00 soll die Hintergrundfarbe Hellgrau und die Schriftfarbe Schwarz haben, aber nicht wenn die CSS Klasse nixb verwendet wird..

Ich habe hellgrauen Hintergrund.

Ich habe keinen hellgrauen Hintergrund, weil ich wurde mit :not ausgeschlossen

So einfach geht das oder 🙂

Das CSS zu dem 1. Beispiel

.notex00  p:not(.nixb){
background:#e2dede;
color:#000;
}

Beispiel 2 mit :not

Nach jedem Listenpunkt soll ein weißer Pfeil in blauem Hintergrund sein, aber nicht dann, wenn die CSS Klasse nixpf verwendet wird.

  • Ich habe kein Pfeilchen, leider…
  • Ein Pfeilchen
  • und noch eines

Das CSS zum 2.Beispiel


.notex01  li:not(.nixpf):after{	
content: "\00A0\2197";	
color:#fff; 
background:#47568d;
font-weight:bold;
padding-right:.3em;
}

Mit :not externe Links hervorheben

Externe Links sind alle Links die nicht den Domainnamen tragen. D.h. schließe ich den eigenen Domainnamen aus habe ich für die Gestaltung das was ich brauche.

In manchen Situationen ist sowohl das Protokoll http wie auch https im Einsatz und hier das CSS dafür.

#content div a[href^='http']:not([href^='http://www.webdesign-in.de']):not([href^='https://www.webdesign-in.de']):after {
	content: "\00A0\2197";
	color: black; font-weight:bold;
	padding-right:.3em;
}


Alle Links innerhalb der ID content und eines darauffolgenden DIV sollen gekennzeichnet werden, außer sie sind auf die eigene Domain.

Weitere Beispiele zu dieser Pseudo-Klasse gibt es im Wiki vo w3.org.

mts

Ebenfalls informativ und lesenswert

2 Kommentare zu “Mit :not ganz einfach externe Links kennzeichnen

  1. Fritz

    Ah, schön!
    Wenn, ja wenn der IE 8 mal vernachlässigbar wird.
    Diesbezüglich teile ich deinen Optimismus aber leider nicht. Ich rechne vielmehr fest damit, dass dieses Monstrum uns noch länger als der IE 6 (Gott hab‘ ihn selig) das Leben schwer machen wird. Nur weil M$ den Support einstellt, werden die Windows XP User sich doch nicht bewegen. Warum denn auch. Sie haben doch auch bisher den Support nicht in Anspruch genommen. Updates? Wieso? Warum? Never touch a running system. Kopf -> Wand.

  2. mts

    das kann sein Fritz, doch weigere ich mich „als Standard“ ein unsicheres System zu unterstützen. Damit leiste ich der „nicht update Fraktion“ ständig Vorschub.