Attributwert-Selektoren
Lektion 13 von 15 im Kurs CSS Selectors von Coddy.
In dieser Lektion werden Sie sich mit dem Konzept der Selektoren für Attributwerte befassen, die mit einer bestimmten Zeichenfolge beginnen. Diese Technik ermöglicht es Ihnen, HTML-Elemente basierend auf den Anfangszeichen ihrer Attributwerte anzusprechen.
Syntax für Selektoren für Attributwerte, die mit einer bestimmten Zeichenfolge beginnen:
Um Elemente mit Attributwerten anzusprechen, die mit einer bestimmten Zeichenfolge beginnen, verwenden Sie die Selektorsyntax [attribute^="value"].
Code-Beispiele:
HTML:
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS:
/* Wählt Buttons aus, deren class-Attributwerte mit "btn-" beginnen */
[class^="btn-"] {
background-color: lightgray;
}In den bereitgestellten Code-Beispielen:
- Drei Buttons sind mit unterschiedlichen class-Attributwerten definiert.
- Die CSS-Regel
[class^="btn-"]spricht Elemente mit einemclass-Attributwert an, der mit "btn-" beginnt. Sie wendet den Stylebackground-color: lightgray;auf diese Buttons an.
Das Ergebnis ist, dass alle drei Buttons eine hellgraue Hintergrundfarbe haben werden, da ihre class-Attributwerte mit "btn-" beginnen.
Aufgabe
EinfachStellen Sie sich vor, Sie haben die folgende HTML-Struktur für eine Liste von Elementen. Ihr Ziel ist es, Listenelemente mit einem spezifischen data-category-Attributwert zu gestalten, der mit "fruit-" beginnt. Wenden Sie mit CSS eine eindeutige Hintergrundfarbe auf diese Listenelemente an.
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>
Alle Lektionen in CSS Selectors
4Attributselektoren
Einführung in AttributselektorenVorhandensein und exakte WerteAttributwert-SelektorenAttributwert-Selektoren IIAttributwert-Selektoren III