CSS - Verwendung von Datenattributen (data-*)

CSS-Eigenschaften festlegen, wenn der Wert des Datenattributs einem bestimmten Wert (Beispiel: data-point="30") entspricht.

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

<style>

div.container::before {
 
contentattr(data-point);
}

div.container[data-point="30"]::before {
 
colorred;
}
</
style>

<
div class="container" data-point="10">Lorem Ipsum</div>
<
div class="container" data-point="20">Lorem Ipsum</div>
<
div class="container" data-point="30">Lorem Ipsum</div>
<
div class="container" data-point="40">Lorem Ipsum</div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<table> Tabelle

CSS - Position Sticky in einer HTML Tabelle

PHP - Wort in einem Text markieren

JavaScript - Filter für HTML-Listenelemente

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden