38 lines
1.2 KiB
HTML
38 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pseudo-Klassen</title>
|
|
<style>
|
|
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
|
a { color: #2563eb; }
|
|
a:hover, a.is-hovered { color: red; text-decoration: underline; }
|
|
a:visited, a.is-visited { color: purple; }
|
|
input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
|
|
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
|
|
ul { list-style: none; padding: 0; }
|
|
li { padding: 6px 10px; }
|
|
li:first-child, li.is-first { font-weight: bold; }
|
|
li:nth-child(odd), li.is-odd { background: #eee; }
|
|
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>:hover / :visited</h3>
|
|
<a href="#" class="is-hovered">Link mit Hover</a> ·
|
|
<a href="#" class="is-visited">Besuchter Link</a>
|
|
|
|
<h3>:focus</h3>
|
|
<input class="is-focused" value="fokussiert">
|
|
|
|
<h3>:first-child, :nth-child(odd)</h3>
|
|
<ul>
|
|
<li class="is-first is-odd">Erster (bold, zebra)</li>
|
|
<li>Zweiter</li>
|
|
<li class="is-odd">Dritter (zebra)</li>
|
|
<li>Vierter</li>
|
|
<li class="is-odd">Fünfter (zebra)</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|