Beispiel:CSS focus-within.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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:SELFHTML-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; 

 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;
 padding-top: 2em;

}

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

Cards mit :focus-within

 <a href="https://wiki.selfhtml.org/wiki/Einstieg_in_HTML">Einstieg in HTML</a>

Der Kurs für die ersten Schritte in HTML und CSS
Schritt für Schritt zur eigenen Webseite

<img class="full" src="https://wiki.selfhtml.org/images/4/48/Html-einstieg-vorschau.svg" alt="">

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

  • Warum Layouts mit CSS?
  • Webseiten responsiv umbauen
  • Stylesheets für HTML und SVG

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

  • Erste Schritte
  • Programmieren und Debuggen

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

  • Selektoren und Kombinatoren
  • Schachtelung in CSS
  • Pseudoelemente

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

Links mit CSS gestalten

</body> </html>

Abgerufen am 23.08.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS_focus-within.html"