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
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…
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.
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!