61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
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/ */ |