29 lines
1.5 KiB
Plaintext
29 lines
1.5 KiB
Plaintext
<codescape class="css">:has</codescape> est magique
|
|
Cette pseudo-class permet de cibler (et donc modfifier le comportement d'un élement) dès lors qu'il contient un autre élement
|
|
Si <code>#foret</code> contient <code>.champignon_rouge</code> on peut ajouter une propriété à <code>#foret</code>
|
|
|
|
<codescape class="css">:checked</codescape> vérifie si un checkbox est checker (cochée)
|
|
Si elle est cochée on peut faire quelque chose avec les éléments suivants
|
|
ou, grace à <codescape class="css">:has</codescape> ... aux éléments parents
|
|
|
|
TODO:
|
|
... quand la checkbox est checked :
|
|
- Modifier l'image de fond de #foret
|
|
... on charge l'image en indiquant son <u>url("....")</u>
|
|
par exemple avec :
|
|
https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg
|
|
<img src="https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg" style="width: 100px;">
|
|
|
|
- Modifier le background de #world_wrapper
|
|
par exemple avec :
|
|
https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg
|
|
<img src="https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg" style="width: 100px;">
|
|
Ajouter également :
|
|
<codescape class="css">background-size: cover;</codescape>
|
|
|
|
|
|
Changer la position de <code>.champignon_rouge</code> où vous voulez
|
|
- faire cela quand la checkbox est <codescape class="css">:checked</codescape>
|
|
- egalement quand le lien est <codescape class="css">:active</codescape>
|
|
- et quand :checked et <codescape class="css">:hover</codescape> sont cumulés
|
|
( chercher où modifier le code existant ) |