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.