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