Attributwert-Selektoren II

In dieser Lektion werden wir das Konzept der Selektoren für Attributwerte, die mit einer bestimmten Zeichenfolge enden, untersuchen. Diese Technik ermöglicht es Ihnen, HTML-Elemente basierend auf den letzten Zeichen ihrer Attributwerte anzusprechen.

Syntax für Selektoren für Attributwerte, die mit einer bestimmten Zeichenfolge enden:

Um Elemente mit Attributwerten anzusprechen, die mit einer bestimmten Zeichenfolge enden, 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 auf "-tertiary" enden */
[class$="-tertiary"] {
   background-color: lightcoral;
}

In den bereitgestellten Code-Beispielen:

• Drei Buttons sind mit unterschiedlichen class-Attributwerten definiert.
• Die CSS-Regel [class$="-tertiary"] spricht Elemente mit einem class-Attributwert an, der auf "-tertiary" endet. Sie wendet den Style background-color: lightcoral; auf diese Buttons an.

Als Ergebnis wird der Button mit dem class-Attributwert "btn-tertiary" eine hellkorallenrote Hintergrundfarbe haben.