Galerie

6 praktische Tipps zur Webtechnik - Attribut-Selektoren: Diese kennzeichnen gemeinsame und spezielle Merkmale für externe Verknüpfungen.

Attribut-Selektoren: Diese kennzeichnen gemeinsame und spezielle Merkmale für externe Verknüpfungen.

Tipp 1: Attribut-Selektoren
Der Tipp zeigt Ihnen, wie Sie Style Sheets über einen CSS3-Attribut-Selektor definieren.

CSS3 bietet zusätzliche Attribut-Selektoren, mit denen Sie Stile für beliebige HTML-Elemente mit bestimmten Attributwerten generieren. Bezüglich des Attributwertes sind drei verschiedene Schreibweisen möglich: Mit [Attributname^=Wert] zielen Sie auf HTML-Elemente, deren Attributwert mit der angegebenen Zeichenfolge beginnt, mit [Attributname$=Wert] auf solche, deren Attributwert mit der angegebenen Zeichenfolge endet.

Wenn Sie das Zeichen * verwenden ([Attributname*=Wert]), bedeutet dies, dass der Wert des betreffenden Attributs die Zeichenfolge - an beliebiger Stelle - enthalten soll. Wenn Sie z.B. allen Verknüpfungen auf der Webseite gemeinsame Stilattribute zuweisen wollen, notieren Sie für das Anchor-Tag folgendes Style Sheet: a[href^="https://"] { ... }.

Allgemein formuliert bedeutet der Ausdruck a[href^="http://"], dass die folgenden Einstellungen für alle <a>-Tags gelten, deren href-Attribut mit der Zeichenfolge "http://" beginnt. Hier das entsprechende Style Sheet des Beispiels.

a[href^="http://"] {
font-style:italic;
font-weight:bold;
font-size:1.9em;
padding-left: 70px;
text-decoration:none;
color: darkblue;
}

Möchten Sie einzelne Werte für bestimmte Verknüpfungen überschreiben, so definieren Sie für das betreffende Attribut, sprich: für die URL, einfach ein weiteres Style Sheet: a[href^="https://www.pc-magazin.de"] {color: red; font-size:3.8em;}. Das Ergebnis sehen Sie in der Abbildung. Die Attribut-Selektoren von CSS3 werden bereits von allen modernen Browsern, einschließlich IE, umgesetzt.

Die beliebtesten Bildergalerien
Youtube-Gema-Sperre umgehen
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Beste WLAN-Router
Galerie
Top 10
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die zehn Geräte, die im Test am besten abgeschnitten haben.
Microsoft hat eine neue Windows-10-Preview als ISO-Download veröffentlicht.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!