SEND all files + questionnaires + json + data_tests

public/codes/all/cibler_is_not.css

@@ -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: 1;
+  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/ */