MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Attribut-Selektoren beziehen sich - anders als die vorherigen - auf die inneren Eigenschaften von HTML-Elementen, also auf die Attribute und die Werte dieser Attribute.

Die grundlegende (generic) Syntax bilden eckige Klammern ([]), die den Namen eines Attributs und eine optionale Bedingung zum Vergleich mit dem Wert dieses Attributes enthalten.

Dabei werden die Werte der Attribut-Selektoren auf zweierlei Weise abgeglichen, was die Unterscheidung der Präsenz- von den Substring-Wert-Attribut-Selektoren rechtfertigt.

Klassen können in diesem Zusammenhang pauschale Attribute darstellen, mit deren Wertgebung (also Benennung) etwa eine gewisse kontextfreie Beliebigkeit mit ins Spiel kommen kann.

1. Die Präsenzwert-Attribut-Selektoren

Diese Attribut-Selektoren zielen entweder auf das (ganze) Vorkommen (auf die Präsenz) eines bestimmten Attributs oder dazu noch auf die exakte Übereinstimmung mit dem Wert dieses Attributs:

  • [attr] : selektiert unabhängig von einem Wert alle HTML-Elemente mit dem Attribut attr.
  • [attr=val] : selektiert alle HTML-Elemente, die das Attribut attr mit genau dem Wert val tragen.
  • [attr~=val]: selektiert jedes HTML-Element mit dem Attribut attr, wenn dessen (ganzer) Wert val in einer von Leerzeichen getrennten Liste mehrerer Werte für attr im HTML-Element referenziert wird, wie etwa eine einzelne Klasse in einer von Leerzeichen getrennten Liste von Klassennamen (denn anstelle class="a" class="b" class="c" könnte man auch schreiben: class="a b c"). Also ein leerzeichenbegrenzter Suchwert (white-space separated or limited value).

Schauen wir uns dazu einen HTML-Auszug als Beispiel an:

Meine Rezeptzutaten: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomaten</li>
  <li data-quantity="3" data-vegetable>Zwiebeln</li>
  <li data-quantity="3" data-vegetable>Knoblauchzehen</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Roter Pfeffer - nur hier kommt spicy als leerzeichenloser Attribut-Wert vor.</li>
  <li data-quantity="2kg" data-meat>Hähnchen</li>
  <li data-quantity="optional 150g" data-meat>Hammelstücke</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olivenöl</li>
  <li data-quantity="25cl" data-vegetable="liquid">Weißwein</li>
</ul>

und ein einfaches Style sheet dazu:

/* Alle Elemente mit dem Attribut "data-vegetable"
   bekommen grüne Textfarbe */
[data-vegetable] {
  color: green
}

/* Alle Elemente mit dem Attribut "data-vegetable"
   vom exakten Wert "liquid" bekommen einen goldenen
   Hintergrund */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* Alle Elemente mit dem Attribut "data-vegetable",
   die (neben möglichen anderen Werten, auch) den ganzen Wert "spicy" enthalten,
   erhalten eine rote Textfarbe */
[data-vegetable~="spicy"] {
  color: red;
}

Das Ergebnis ist wie folgt:

2. Teilwert- oder Substringwert-Attribut-Selektoren

Die Attribut-Selektoren dieser Art sind "RegExp-nahe Selektoren", weil sie ähnlich dem regular expression flexiblere (weil) Teilausdrücke erlauben, die Mächtigkeit regulärer Suchausdrücke aber lange nicht erreichen:

  • [attr|=val] : selektiert alle Elemente mit dem Attribut attr, dessen Wert entweder ganz mit der Zeichenfolge val übereinstimmt oder nur genau mit der Zeichenfolge val- beginnt
    ACHTUNG - der Bindestrich nach val ist hier kein Versehen, sondern für die Behandlung/Beachtung von Länderkürzeln bei Spracheinstellungen erforderlich).
  • [attr^=val] : selektiert alle Elemente mit dem Attribut attr, dessen Wert mit der Zeichenfolge val beginnt.
  • [attr$=val] : selektiert alle Elemente mit dem Attribut attr, dessen Wert genau auf die Zeichenfolge val endet.
  • [attr*=val] : selektiert alle Elemente mit dem Attribut attr, dessen Wert die angegebene Zeichenfolge val (quasi als Teilausdruck) an beliebiger Stelle enthält, also genau anders als [attr~=val]; deswegen behandelt dieser Selektor eventuelle Leerzeichen auch nicht als Trennzeichen für Werte, sondern als Teil des Attribut-Wertes.
    Merke nochmal: Attribut-Namen selbst dürfen keine Leerzeichen enthalten, die Attribut-Werte schon.

Setzen wir zur Anschauung unser voriges Beispiel fort und ergänzen einige CSS Regeln:

/* Klassischer Gebrauch für Sprachauswahl */
[lang|=fr] {
  font-weight: bold;
}

/* Alle Elemente mit dem Attribut "data-vegetable", 
die (neben möglichen anderen Werten) den Wert "not spicy" enthalten,
werden auf grüne Textfarbe zurückgesetzt. */
[data-vegetable*="not spicy"] {
  color: green;
}

/* Alle Elemente mit dem Attribut "data-quantity", 
deren Wert auf die Zeichenfolge "kg" endet. */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* Alle Elemente mit dem Attribut "data-quantity", 
deren Wert mit der Zeichenfolge "optional" beginnt. */
[data-quantity^="optional"] {
  opacity: 0.5;
}

 

Mit diesen neuen Regeln erhalten wir folgendes:

Mitmachen: Internationale Fußballrangliste frisieren ;)

In dieser Mitmach-Übung möchten wir Sie veranlassen, Attribut-Selektoren zu einigen CSS-Regeln hinzuzusetzen, um eine einfache Trefferliste von Fußballspielen zu gestalten. Drei Dinge sollen hierzu getan werden:

  • Die ersten drei Regeln fügen die Flaggensymbole von England, Deutschland und Spanien links von den Listenelementen hinzu. Dazu müssen Sie die entsprechenden Attribut-Selektoren so eintragen, dass den aufgeführten Mannschaften die ihrer Sprache zugehörigen Nationalfarben zukommen.
  • Die Regeln 4–6 fügen den Listenelementen eine Hintergrundfarbe zu, die anzeigen soll, ob die Mannschaft in der Liga aufgestiegen ist (grün, rgba(0,255,0,0.7)), abgestiegen ist (rot, rgba(255,0,0,0.5)), oder die Position gehalten hat (blau, rgba(0,0,255,0.5).) 
    Tragen Sie die entsprechenden Attribut-Selektoren ein, um dem richtigen Team die richtige Farbe zuzuordnen, wobei Sie auf die Zeichenfolgen inc, same und dec achten, die in den Werten des Attributs data-perf auftauchen.
  • Die Regeln 7 und 8 stellen Mannschaften, die gefördert werden sollen, bold (fett) und Teams, die zur Relegation anstehen kursiv (italic) und (gray) dar. Fügen Sie die entsprechenden Attribut-Selektoren so hinzu, dass diese Formatierungen dem entsprechenden Team zukommen, was an den Zeichenketten pro und rel ablesebar ist, die in den Werten des data-perf Attributes vorkommen.

Falls Sie dabei einen Fehler machen, können Sie ihn mit Klick auf Reset rückgängig machen. Wenn es Ihnen zuviel wird, können Sie sich mit Klick auf Show solution eine mögliche Lösung anschauen:

Als nächstes käme noch...

einen Gang höher zu schalten; wir werden uns nämlich die Pseudo-Klassen und Pseudo-Elemente anschauen.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Kammreiter
 Zuletzt aktualisiert von: Kammreiter,