CSS :has() Interactive Guide
▻https://ishadeed.com/article/css-has-guide
On peut faire des trucs sympas avec :has(), exemples :
With CSS :has(), we can replicate the logical operators like ”&&” and ”||“
/* OR */
.shelf:has(.bookPurple, .bookYellow) {
outline: dashed 2px deeppink;
}
/* AND */
.shelf:has(.bookPurple):has(.bookYellow) {
outline: dashed 2px deeppink;
} In this example, I want to show an additional visual clue if the page has an alert.
.main:has(.alert) .header {
box-shadow:
inset 0 2px 0 0 red,
0 3px 10px 0 rgba(#000, 0.1);
background-color: #fff4f4;
}Et plein d’autres trucs comme “Quantity queries with CSS :has” , “We can select an element if it’s followed by another.”, “For example, if the user selects “other”, we want to show input to let them fill in more info.” qui pourrait être utile à saisies de #SPIP et son afficher_si, etc.
