CSS-Attribut-Selektoren

Leon A. - July 19, 2024

Syntax und Verwendung

Mit Attributselektoren in CSS können Sie Elemente anhand ihrer Attribute auswählen. Die grundlegende Syntax eines Attributselektors besteht aus eckigen Klammern [], die den Attributnamen enthalten. Sie können die Auswahl verfeinern, indem Sie den Attributwert angeben oder spezielle Operatoren verwenden.

Um ein Element mit einem bestimmten Attribut auszuwählen, verwenden Sie diese Syntax:

Beispiel: Einfacher Attributselektor

[attribute] {
  /* CSS-Stile */
}

Um alle <a>-Elemente mit einem target-Attribut auszuwählen, verwenden Sie:

Beispiel: Auswahl von `<a>`-Elementen mit einem target-Attribut

a[target] {
  /* CSS-Stile */
}

Sie können Elemente auch basierend auf dem Wert eines Attributs auswählen. Dazu fügen Sie nach dem Attributnamen ein Gleichheitszeichen = und den Attributwert in Anführungszeichen hinzu:

Beispiel: Attributselektor mit bestimmtem Wert

[attribute="wert"] {
  /* CSS-Stile */
}

Um alle <img>-Elemente mit einem alt-Attributwert von "logo" auszuwählen, verwenden Sie:

Beispiel: Auswahl von -Elementen mit bestimmtem alt-Attribut

img[alt="logo"] {
  /* CSS-Stile */
}

Einige gängige Attributselektoren sind:

[class]: Wählt Elemente mit einer Klasse aus.
[id]: Wählt Elemente mit einer ID aus.
[type]: Wählt Eingabetypen aus.
[disabled]: Wählt deaktivierte Elemente aus.
[required]: Wählt erforderliche Elemente aus.

Beispiele für die Verwendung dieser Selektoren:

Beispiel: Spezifische Attributselektoren

/* Wählt alle Eingabeelemente mit dem Typ "text" aus */
input[type="text"] {
  /* CSS-Stile */
}

/* Wählt alle Elemente mit einem "data-toggle"-Attribut aus */
[data-toggle] {
  /* CSS-Stile */
}

/* Wählt alle Elemente aus, deren "title" "example" enthält */
[title*="example"] {
  /* CSS-Stile */
}

Attributselektoren bieten Ihnen eine Möglichkeit, bestimmte Teile Ihrer Webseite basierend auf deren Attributen auszuwählen und zu gestalten.

Arten von Attributselektoren

CSS-Attributselektoren gibt es in verschiedenen Varianten, jede mit eigener Syntax und Zweck. Hier sind die unterschiedlichen Arten von Attributselektoren und wie man sie verwendet.

Präsenz-Selektor

Der Präsenz-Selektor zielt auf Elemente ab, die ein bestimmtes Attribut haben, unabhängig von dessen Wert. Die Syntax für den Präsenz-Selektor ist:

Beispiel: Syntax für Präsenz-Selektor

[attribute] {
  /* CSS-Stile */
}

Um alle <a>-Elemente auszuwählen, die ein title-Attribut haben:

Beispiel: Alle `<a>`-Elemente mit einem title-Attribut auswählen

a[title] {
  /* CSS-Stile */
}

Dieser Selektor trifft auf jedes <a>-Element mit einem title-Attribut zu, unabhängig vom Wert des Attributs.

Gleichheits-Selektor

Der Gleichheits-Selektor zielt auf Elemente ab, deren Attributwert einem bestimmten Wert entspricht. Die Syntax für den Gleichheits-Selektor ist:

Beispiel: Syntax für Gleichheits-Selektor

[attribute="value"] {
  /* CSS-Stile */
}

Um alle <input>-Elemente mit einem type-Attributwert von "submit" auszuwählen:

Beispiel: Alle `<input>`-Elemente mit type='submit' auswählen

input[type="submit"] {
  /* CSS-Stile */
}

Standardmäßig ist der Gleichheits-Selektor Groß-/Kleinschreibung-sensitiv. Für eine Groß-/Kleinschreibung-unabhängige Übereinstimmung fügen Sie ein i vor der schließenden Klammer hinzu:

Beispiel: Groß-/Kleinschreibung-unabhängiger Gleichheits-Selektor

[attribute="value" i] {
  /* CSS-Stile */
}

Teilstring-Selektoren

Teilstring-Selektoren zielen auf Elemente ab, deren Attributwert einen bestimmten Teilstring enthält. Es gibt drei Arten von Teilstring-Selektoren:

Beginnt mit-Selektor ([attribute^="value"]): Wählt Elemente aus, deren Attributwert mit dem angegebenen Wert beginnt.
Endet mit-Selektor ([attribute$="value"]): Wählt Elemente aus, deren Attributwert mit dem angegebenen Wert endet.
Enthält-Selektor ([attribute*="value"]): Wählt Elemente aus, deren Attributwert den angegebenen Wert irgendwo im String enthält.

Beispiele für jeden Teilstring-Selektor:

Beispiel: Auswahl mit Attribut, das mit Wert beginnt

[data-category^="top"] {
  /* CSS-Stile */
}

Beispiel: Auswahl mit Attribut, das mit Wert endet

[href$=".pdf"] {
  /* CSS-Stile */
}

Beispiel: Auswahl mit Attribut, das Wert enthält

[class*="featured"] {
  /* CSS-Stile */ 
}

Suffix- und Präfix-Selektoren

Suffix- und Präfix-Selektoren ähneln den Beginnt-mit- und Endet-mit-Teilstring-Selektoren, passen aber auf ganze Werte statt nur auf Teile.

Präfix: [attribute|='value']: Passt auf Attribute, die gleich sind oder mit einem Bindestrich (-) beginnen.
Suffix: Nicht in CSS unterstützt

Beispiel:

Beispiel: Präfix-Selektor für Sprachen

/* Passt auf lang='en' oder beginnt mit 'en-' */ 
 [lang|='en'] {   
   /* CSS-Stile */
 }

Kombinieren von Attributselektoren

Sie können mehrere Attributselektoren zusammen verwenden, um bestimmte Elemente anhand von mehr als einem Attribut auszuwählen. Dies ermöglicht präzise und komplexe Selektionen. Sie können Attributselektoren auch mit anderen CSS-Selektoren wie Klassen-, ID- oder Elementselektoren kombinieren.

Um Attributselektoren zu kombinieren, schreiben Sie sie nacheinander innerhalb desselben Selektors:

Beispiel: Kombinieren von Attributselektoren

[attribute1][attribute2] {
  /* CSS-Stile */
}

Um alle <input>-Elemente mit einem type-Attribut "text" und einem required-Attribut auszuwählen:

Beispiel: Auswahl bestimmter Eingabeelemente

input[type="text"][required] {
  /* CSS-Stile */
}

Sie können Attributselektoren auch mit anderen CSS-Selektoren mischen.

Beispiel: Mischen von Attributselektoren mit Klassenselektoren

a.button[data-type="primary"] {
  /* CSS-Stile */
}

Hier sind einige weitere Beispiele für komplexe Kombinationen:

Beispiel: Auswahl von Elementen mit mehreren Attributen

/* Wählt <img>-Elemente mit einem "data-src"-Attribut und einem "alt"-Attribut, das "avatar" enthält */
img[data-src][alt*="avatar"] {
  /* CSS-Stile */
}

/* Wählt <div>-Elemente mit einem "role"-Attribut "alert" und einem "data-type", das mit "warning" beginnt */
div[role="alert"][data-type^="warning"] {
  /* CSS-Stile */
}

/* Wählt <a>-Elemente mit einem "href", das mit ".pdf" endet, und einem "target" von "_blank" */
a[href$=".pdf"][target="_blank"] {
  /* CSS-Stile */
}

Durch die Kombination dieser Methoden können Sie sehr spezifische Selektionen erstellen, um Stile auf Elemente basierend auf bestimmten Attributen anzuwenden. Dies gibt Ihnen Flexibilität und Kontrolle über Ihr Seitenstyling.

Praktische Anwendungen

Attributselektoren haben viele Anwendungsmöglichkeiten in der Webentwicklung. Sie ermöglichen es, Elemente basierend auf ihren Attributen zu gestalten, was es einfacher macht, bestimmte Elemente anzusprechen, ohne zusätzliche Klassen oder IDs hinzuzufügen. Hier sind einige Beispiele, wie Attributselektoren verwendet werden können:

Gestaltung von Formularelementen

Attributselektoren werden häufig verwendet, um Formularelemente basierend auf ihren Attributen zu gestalten.

Beispiel: Gestaltung von erforderlichen Formularfeldern

input[required], 
textarea[required] {
  border: 1px solid red;
}

Sie können auch Formularelemente basierend auf ihrem Typ gestalten:

Beispiel: Gestaltung von Formularelementen nach Typ

input[type="text"] {
  background-color: #f0f0f0;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

Gestaltung von Links

Attributselektoren können verwendet werden, um Links basierend auf ihrem href-Attribut zu gestalten.

Beispiel: Hinzufügen eines Icons zu externen Links

a[href^="http"]:after {
  content: "↗️";
}

Sie können auch Links gestalten, die auf einen bestimmten Dateityp verweisen, wie PDFs:

Beispiel: Gestaltung von PDF-Links

a[href$=".pdf"] {
  background-image: url('pdf-icon.png');
  padding-left: 20px;
}

Ansprechen von benutzerdefinierten Datenattributen

HTML5 führte benutzerdefinierte Datenattribute ein, mit denen Sie zusätzliche Informationen zu Elementen speichern können. Sie können Attributselektoren verwenden, um diese benutzerdefinierten Attribute anzusprechen und Stile basierend auf ihren Werten anzuwenden.

Beispiel: Gestaltung von benutzerdefinierten Datenattributen

<div data-theme="dark">Dunkelmodus</div>
<div data-theme="light">Hellmodus</div>

[data-theme="dark"] {
  background-color: #333;
  color: white;
}

[data-theme="light"] {
  background-color: white;
  color: #333;
}

Internationalisierung

Attributselektoren können verwendet werden, um Elemente basierend auf dem lang-Attribut zu gestalten, das die Sprache des Elementinhalts angibt. Dies ist nützlich für Websites, die mehrere Sprachen unterstützen.

Beispiel: Gestaltung basierend auf der Sprache

[lang|="en"] {
  font-family: "English Font", sans-serif;
}

[lang|="ja"] {
  font-family: "Japanese Font", serif.
}

Bewährte Praktiken

Bei der Verwendung von Attributselektoren in Ihrem CSS sollten Sie einige bewährte Praktiken befolgen, um Ihren Code effizient und wartbar zu halten. Hier einige Tipps:

Schreiben Sie effiziente Selektoren

Obwohl Attributselektoren hilfreich sind, kann ihre übermäßige Verwendung zu komplexem und ineffizientem CSS führen. Verwenden Sie sie sparsam und kombinieren Sie sie wenn möglich mit Klassen oder anderen einfacheren Selektoren.

Beispiel: Schreiben Sie effiziente Selektoren

/* Weniger effizient */
[data-type="button"][data-size="large"][data-color="primary"] {
  /* Stile */
}

/* Effizienter */
.btn-lg-primary {
  /* Stile */
}

Vermeiden Sie übermäßige Verwendung

Vermeiden Sie die Verwendung von Attributselektoren für die Stilisierung einer großen Anzahl von Elementen. Das Anwenden von Stilen auf Elemente wie [class] oder [href] kann viele Elemente betreffen und Ihre Seite verlangsamen. Verwenden Sie stattdessen spezifischere Selektoren oder Klassen.

Beispiel: Vermeiden Sie übermäßige Verwendung

/* Vermeiden Sie dies */
[href] {
  color: blue;
}

/* Verwenden Sie stattdessen eine Klasse oder einen spezifischeren Selektor */
a {
  color: blue;
}

Beachten Sie die Spezifität

Attributselektoren haben eine höhere Spezifität als Klassen-, Pseudo-Klassen- oder Elementselektoren, aber eine niedrigere Spezifität als IDs. Das bedeutet, dass Stile, die mit Attributselektoren angewendet werden, schwer zu überschreiben sein können.

Um die Spezifität zu handhaben, versuchen Sie, Attributselektoren in Kombination mit Klassen anstatt allein zu verwenden. Dies macht Ihre Stile modularer und einfacher zu handhaben.

Beispiel: Beachten Sie die Spezifität

/* Höhere Spezifität, schwieriger zu überschreiben */
[type="text"] {
  border: 1px solid black;
}

/* Niedrigere Spezifität, modularer */
.text-input[type="text"] {
  border: 1px solid black;
}