public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:53:11 +02:00
parent a2934f1327
commit fb361a2854
35 changed files with 747 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
slides/223015c/assets/demos/css-pseudo-classes.html Normal file
View File

@@ -0,0 +1,37 @@
<!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> &middot;
<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>