Beispiel:CSS focus-within-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Cards mit :focus-within</title>
<style>
.card a:focus {
outline: none; /* we rely on the card highlight */
}
/* Highlight on hover oder wenn das innere Element den Fokus hat */
.card:hover,
.card:focus-within {
border-color: skyblue;
box-shadow: 0 8px 16px rgb(51 117 153 / 0.6);
}
.card a {
display: block;
color: steelBlue;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 0.5em;
}
.card a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
body {
font-family: sans-serif;
background: #ccc;
padding: 2em;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
gap: 1em;
}
.card {
background: white;
border: thin solid steelBlue;
border-radius: 0 .5em .5em;
transition: all 0.2s;
position: relative;
}
.card > * {
padding: 0.5em 1em;
margin: 0;
}
.card ul {
margin-left: 1em
}
.card .icon {
width: 5em;
float: right;
margin: 0 0 .5em .5em;
}
.card .full {
width: calc(100% - 1em);
margin: 0;
padding: 0 .5em;
}
:root {
--red: #c82f04;
}
</style>
</head>
<body>
<h1>Cards mit <code>:focus-within</code></h1>
<div class="cards">
<div class="card" style="background-color:beige;grid-row-end:span 2;">
<a href="https://wiki.selfhtml.org/wiki/Einstieg_in_HTML">Einstieg in <span style="color:var(--red)">HTML</span></a>
<p>Der Kurs für die ersten Schritte in HTML und CSS<br>
Schritt für Schritt zur eigenen Webseite</p>
<img class="full" src="https://wiki.selfhtml.org/images/4/48/Html-einstieg-vorschau.svg" alt="">
</div>
<div class="card">
<img class="icon" src="https://wiki.selfhtml.org/images/6/62/CSS3_logo.svg" alt="">
<a href="https://wiki.selfhtml.org/wiki/Einstieg_in_CSS">Einstieg in CSS</a>
<ul>
<li>Warum Layouts mit CSS?</li>
<li>Webseiten responsiv umbauen</li>
<li>Stylesheets für HTML und SVG</li>
</ul>
</div>
<div class="card">
<img class="icon" src="https://wiki.selfhtml.org/images/b/b2/JS-Einstieg-icon.svg" alt="">
<a href="https://wiki.selfhtml.org/wiki/Einstieg_in_JavaScript">Einstieg in JavaScript</a>
<ul>
<li>Erste Schritte</li>
<li>Programmieren und Debuggen</li>
</ul>
</div>
<div class="card">
<img class="icon" src="https://wiki.selfhtml.org/images/9/9a/Selector-icon.svg" alt="">
<a href="https://wiki.selfhtml.org/wiki/Selektoren_in_CSS">Selektoren in CSS</a>
<ul>
<li>Selektoren und Kombinatoren</li>
<li>Schachtelung in CSS</li>
<li>Pseudoelemente</li>
</ul>
</div>
<div class="card">
<img class="icon" src="https://wiki.selfhtml.org/images/7/7b/Link-icon.svg" alt="">
<a href="https://wiki.selfhtml.org/wiki/Maus- und Tastaturinteraktionen">Maus- und Tastatur­interaktionen</a>
<p>Links mit CSS gestalten
</p>
</div>
</div>
</body>
</html>
