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.

<p> Textabsatz

CSS - Bild mit Impuls

PHP - Arithmetische Operatoren

JavaScript - HTML-Tabelle sortieren

MySQL - Eintrag überschreiben

Sitemap - Übersicht
Werden auf einer Seite zu viele Links angezeigt, kann der Besucher schnell die Übersicht verlieren. Bei größeren Webseiten empfiehlt es sich daher eine Seite mit einer Übersicht (oder Inhaltsverzeichnis) anzubieten.