SEND all files + questionnaires + json + data_tests

This commit is contained in:
vincent_b
2025-11-19 12:12:03 +01:00
parent 71591b98f0
commit c78698f79a
197 changed files with 29115 additions and 0 deletions

View File

@@ -0,0 +1,61 @@
li:is(.active, .superactive, .neversleep) {
background-color: red;
}
li.active [data-etat="busy"] {
background-color: orange;
}
li:not(.active) {
background-color: cyan;
}
/* tout élément présent dan li...
... qui possède l'ttribut "data-etat" */
li [data-etat] {
width: 100%;
display: inline-block;
}
li {
font-style: italic;
/* grâce au neasting... */
/* ... les spans contenues dans .state sont ciblées ainsi :
... sans neasting on autait écrit :
... li.state
*/
.state {
border-left: 15px solid pink;
/* & indique indique qu'on cible l'élément avec une class "state"
.... et (+) un attribut (ou autre propriété tel .exemple)
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
... sans neasting on autait écrit :
... li.state[data-etat="sleeping"]
*/
&.exemple, /* , affect si a la class OU l'attribut... */
&[data-etat="sleeping"],
&:is([data-etat="sleeping"],[data-etat="sleep"])
/* ... cumul de conditions pouvant être remplies
pour que cette instruction CSS soit remplie */
{
opacity: 0.4;
}
}
}
/* si une li "possède/contient" == :has(x_condition) */
/* alors li en question (parent.e) est affectée/ciblée*/
/* ... ici, si li contient un element enfant...
...... dont l'attribut est data-etat="sleeping"
........ elle a un autre background */
li:has([data-etat="sleeping"]) {
opacity: 1s;
background: #8080805e;
text-decoration: line-through;
}
li:last-of-type {
border-bottom: 3px solid blue;
}
li:nth-child(3) {
border: 5px solid pink;
}
/* https://css-tricks.com/examples/nth-child-tester/ */