Attributwert-Selektoren III
Lektion 15 von 15 im Kurs CSS Selectors von Coddy.
In dieser Lektion werden wir das Konzept der Selektoren für Attributwerte, die eine bestimmte Zeichenfolge enthalten, untersuchen. Diese Technik ermöglicht es Ihnen, HTML-Elemente basierend darauf anzusprechen, ob ihre Attributwerte eine bestimmte Teilzeichenfolge enthalten.
Syntax für Selektoren, die einen Attributwert enthalten:
Um Elemente anzusprechen, deren Attributwerte eine bestimmte Zeichenfolge enthalten, verwenden Sie die Selektorsyntax [attribute*="value"].
Code-Beispiele:
HTML:
<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>CSS:
/* Wählt <div>-Elemente aus, deren Klassenattributwerte "fruit" enthalten */
[class*="fruit"] {
color: green;
}Erklärung der Code-Beispiele:
In den bereitgestellten Code-Beispielen:
- Fünf
<div>-Elemente sind mit unterschiedlichen Klassenattributwerten definiert. - Die CSS-Regel
[class*="fruit"]spricht Elemente an, derenclass-Attributwert die Teilzeichenfolge "fruit" enthält. Sie wendet den Stylecolor: green;auf diese Elemente an.
Als Ergebnis werden die <div<strong>></strong>-Elemente mit den Klassenattributen "tag fruit" eine grüne Textfarbe haben.
Aufgabe
EinfachSie haben die Aufgabe, eine Liste von Produkten auf einer Webseite zu gestalten. Jedes Produkt wird durch ein <div>-Element mit einem data-tags-Attribut dargestellt, das seine Tags angibt (z. B. "electronics", "clothing", "accessories"). Ihr Ziel ist es, die Produkte basierend auf ihren Tags mithilfe von Selektoren, die Attributwerte enthalten, unterschiedlich zu gestalten.
Ihre CSS-Aufgabe besteht darin:
- Geben Sie Produkten, deren
data-tags-Attribut "electronics" enthält, eine eindeutige Hintergrundfarbe. - Geben Sie Produkten, deren
data-tags-Attribut "clothing" enthält, einen eindeutigen Rahmen. - Geben Sie Produkten, deren
data-tags-Attribut "accessories" enthält, eine eindeutige Hintergrundfarbe.
Probier es selbst
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-tags="electronics">Smartphone</div>
<div data-tags="clothing">T-Shirt</div>
<div data-tags="accessories">Sunglasses</div>
<div data-tags="electronics clothing">Headphones</div>
</body>
</html>
Alle Lektionen in CSS Selectors
4Attributselektoren
Einführung in AttributselektorenVorhandensein und exakte WerteAttributwert-SelektorenAttributwert-Selektoren IIAttributwert-Selektoren III