Das Wesentliche über CSS-Attributselektoren

CSS kann HTML-Elemente basierend auf einem ihrer Attribute ansprechen. Wahrscheinlich kennen Sie Klassen und IDs bereits. Schauen Sie sich diesen HTML-Code an

<h2 id="title" class="magic" rel="friend">David Walsh</h2>

Dieses einzelne Element hat drei Attribute: ID, Klasse und rel. Um das Element in CSS auszuwählen, könnten Sie einen ID-Selektor (#title) oder einen Klassenmagier-Selektor (.magic) verwenden. Aber wussten Sie, dass Sie es auch basierend auf dem rel-Attribut auswählen können? Das ist, was als Attributselektor bekannt ist.

h2[rel="friend"] {
   /* woohoo! */
}

Es gibt jedoch noch viel mehr zu Attributselektoren, also schauen wir uns alle verschiedenen Optionen genauer an und versuchen, einige "reale" Szenarien abzudecken, wann sie nützlich sein könnten.

Attribut entspricht exakt einem bestimmten Wert

Im obigen Beispiel war das Attribut des h2-Elements „friend“. Der von uns geschriebene CSS-Selektor zielte auf dieses h2-Element ab, da sein rel-Attribut genau „friend“ war. Mit anderen Worten, das Gleichheitszeichen bedeutet genau das, was Sie denken… eine exakte Übereinstimmung. Sehen Sie ein weiteres einfaches Beispiel

<h1 rel="external">Attribute Equals</h1>

h1[rel="external"] { color: red; }

Ein großartiges reales Beispiel dafür ist die Gestaltung einer Blogroll. Nehmen wir an, Sie haben eine Liste von Links zu Freundesseiten wie diese

<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

Dann wollten Sie jeden Link etwas anders gestalten. Der traditionelle Weg wäre wahrscheinlich, jedem Link einen Klassennamen zu geben, auf den man abzielen kann, aber das erfordert zusätzlichen Markup, was immer eine schöne Sache ist, die man vermeiden kann (Semantik und so). Ein anderer Weg könnte sein, :nth-child zu verwenden, aber das erfordert, dass sich ihre Reihenfolge nie ändert. Dies ist die perfekte Verwendung für Attributselektoren… die Links haben bereits ein eindeutiges Attribut, auf das man abzielen kann!

a[href="http://perishablepress.com"] { color: red; }

Ich glaube, die häufigste Verwendung von regulären Attributselektoren sind bei Eingaben. Es gibt Text, Button, Checkbox, Datei, Versteckt, Bild, Passwort, Radio, Zurücksetzen und Senden (habe ich etwas vergessen?). Alle sind <input>, und alle sind sehr unterschiedlich. Daher ist es meistens eine schlechte Idee, so etwas zu tuninput { padding: 10px; }ist meistens eine schlechte Idee. Es ist sehr üblich, Dinge wie diese zu sehen

input[type="text"] { padding: 3px; }
input[type="radio"] { float: left; }

Es ist wirklich der einzige Weg, um bestimmte Arten von Eingaben zu erhalten, ohne die anderen zu verderben und ohne zusätzlichen Markup hinzuzufügen.

Hinweis zu Anführungszeichen: Sie kommen normalerweise ohne Anführungszeichen in Attributselektoren aus, wie [type=radio], aber die Regeln für das Weglassen von Anführungszeichen sind seltsam und inkonsistent über tatsächliche Browserimplementierungen hinweg. Daher ist es eine bewährte Methode, einfach Anführungszeichen zu verwenden, wie [type="radio"]. Es ist sicherer und funktioniert immer.

Attribut enthält einen bestimmten Wert irgendwo

Hier wird es interessanter. Das Gleichheitszeichen in Attributselektoren kann durch andere Zeichen vorangestellt werden, die die Bedeutung leicht verändern. Zum Beispiel bedeutet „*=” „den folgenden Wert *irgendwo im Attributwert* abgleichen“. Sehen Sie sich dieses Beispiel an

<h1 rel="xxxexternalxxx">Attribute Contains</h1>

h1[rel*="external"] { color: red; }

Denken Sie daran, dass Klassen und IDs auch Attribute sind und mit Attributselektoren verwendet werden können. Nehmen wir an, Sie schreiben CSS für eine Website, bei der Sie den Markup nicht kontrollieren können, und ein schlampiger Entwickler hat drei DIVs, die Sie ansprechen müssen

<div id="post_1"></div>
<div id="post_two"></div>
<div id="third_post"></div>

Sie können sie alle mit auswählen

div[id*="post"]  { color: red; }

Attribut beginnt mit einem bestimmten Wert

<h1 rel="external-link yep">Attribute Begins</h1>

h1[rel^="external"] { color: red; }

Ein reales Beispiel dafür wäre, sagen wir, Sie möchten jeden Link zu Ihrer Freundesseite anders gestalten als andere Links. Es spielt keine Rolle, ob Sie auf ihre Homepage oder eine Unterseite verlinken, alle Links zu ihnen möchten Sie gestalten.

a[href^="http://perishablepress.com"] { color: red; }

Das stimmt mit einem Link zu ihrer Homepage überein, aber auch mit allen anderen Unterseiten.

Attribut endet mit einem bestimmten Wert

Wir können auswählen, basierend darauf, wie Attributwerte *beginnen*, warum nicht *enden*?

<h1 rel="friend external">Attribute Ends</h1>

h1[rel$="external"] { color: red; }

Ein guter Anwendungsfall dafür ist die Kennzeichnung von Download-Links mit Symbolen basierend auf dem Dateityp. Zum Beispiel erhalten PDFs ein PDF-Symbol und Word-Dokumente ein Word-Symbol

a[href$=".pdf"] { background: url(icon-pdf.png) left center no-repeat; padding-left: 30px; }
a[href$=".doc"] { background: url(icon-doc.png) left center no-repeat; padding-left: 30px; }

Attribut ist Teil einer Leerzeichen-getrennten Liste

Sie wussten wahrscheinlich bereits, dass Sie Elementen mehrere Klassen zuweisen können, richtig? Wenn Sie das tun, können Sie immer noch .klassenname in CSS verwenden, um eine davon anzusprechen. Attributselektoren sind nicht so einfach. Wenn Ihr rel-Attribut mehrere Werte hat (z. B. Werte in einer Leerzeichen-getrennten Liste), müssen Sie „~=“ verwenden.

<h1 rel="friend external sandwich">Attribute Space Separated</h1>

h1[rel~="external"] { color: red; }

Sie denken vielleicht, warum sollte ich das verwenden, wenn *= dies auch abdecken würde und vielseitiger wäre? Tatsächlich ist es vielseitiger, aber es kann zu vielseitig sein. Dieser Selektor erfordert die Leerzeichen um den Wert herum, wo *= dies nicht tun würde. Wenn Sie also zwei Elemente hätten, eines mitrel=home friend-linkund eines mitrel=home friend linkwerden Sie den Leerzeichen-getrennten Selektor benötigen, um den zweiten richtig anzusprechen.

Attribut ist der Anfang einer Bindestrich-getrennten Liste

Dies wählt aus, wenn der *Anfang* einer Bindestrich-getrennten Liste von Attributwerten mit dem Selektor übereinstimmt.

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>

h1[rel|="friend"] { color: red; }

Beachten Sie, dass, obwohl es auf der Grundlage des Anfangs des Selektors übereinstimmt, der gesamte erste Teil des Strings vor dem ersten Bindestrich übereinstimmen muss. Im obigen Beispiel würde es also keine Übereinstimmung geben, wenn das rel-Attribut friend2-external-sandwich wäre, während der ^=-Attributselektor dies getan hätte.

Mehrere Attribut-Übereinstimmungen

Wichtig ist, dass Sie mehrere Attributselektoren im selben Selektor verwenden können, was erfordert, dass alle übereinstimmen, damit der Selektor selbst übereinstimmt.

<h1 rel="handsome" title="Important note">Multiple Attributes</h1>

h1[rel="handsome"][title^="Important"] { color: red; }

Groß-/Kleinschreibung-unempfindliche Attributselektoren

Standardmäßig sind die Zeichenfolgen innerhalb von Attributselektoren groß-/kleinschreibungsempfindlich, aber anstatt mehrere Permutationen der Groß-/Kleinschreibung abzugleichen, wenn Sie dies tun müssen, können Sie einen Wert übergeben, der sie groß-/kleinschreibungsunempfindlich macht.

/* Will match
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Attribut in CSS verwenden

Sie können nicht nur über Attribute auswählen, sondern auch Attribute im CSS-Inhalt verwenden, wie zum Beispiel…

.el::before {
  content: attr(data-prefix) ": ";
}

Hoffentlich erhalten wir eines Tages Unterstützung für Typen und Fallback in der attr()-Funktion in CSS, wie

.el {
  /* <div class="el" data-font-size="18"> */
  font-size: attr(data-font-size px);

  /* <div class="el"> */
  font-size: attr(data-font-size px, 18px);
}

Browser-Unterstützung

Jedes einzelne Beispiel oben funktioniert in allen modernen Browsern: Safari, Chrome, Firefox, Opera und IE. Internet Explorer hat perfekte Unterstützung für all diese ab Version 7, aber keine Unterstützung in Version 6. Um in Ihrem Browser zu testen, sehen Sie die Testseite. Wenn der Zeilen-/Selektorstil rot ist, funktioniert er.