CSS - Verwendung von Datenattributen (data-*)

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

Lorem Ipsum


<style>

div.container::before {

 content: attr(data-point);

}



div.container[data-point="30"]::before {

 color: red;

}

</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.

<area> Areal (Verweis-sensitive Grafik)

CSS - Tabellenzeilen bei :hover hervorheben

PHP - Variable auf Buchstaben und Zahlen prüfen

JavaScript - Ausgabe des aktuellen Datums mit Monats- und Tagesnamen

MySQL - Datensatz Wert erhöhen

Inhalt vom Design trennen
ndem es die Möglichkeit zum Einbinden von anderen Dateien in PHP gibt, macht es Ihnen PHP recht einfach, das Design und die Navigation Ihrer Webseite voneinander zu trennen. Der include(...)-Befehl in PHP erlaubt es, andere Dateien in die aktuelle einzubinden. Damit ist es möglich, immer wiederkehrende, identische Bereiche einer Webseite in anderen Dateien auszulagern. Diese Dateien werden dann in die eigentliche Seite eingebunden.