【CSS】:has()擬似クラスが全てのブラウザでサポートされた

/* figcaptionがあるfigure要素を選択 */
figure:has(> figcaption) {

}

/* svgの直接の子孫がないa要素を選択 */
a:not(:has(> svg)) {

}

/* inputの直接の兄弟があるlabel要素を選択 */
lable:has(+ input) {

}

/* 子孫のimgにaltがないarticle要素を選択 */
article:has(img:not([alt])) {

}

/* DOM内で何かしらの状態が存在するdoumentElementを選択 */
:root:has(.menu-toggle[aria-pressed="true"]) {

}

/* 子の数が奇数の.containerを選択 */
.container:has(>.container__item:last-of-type:nth-of-type(odd)) {

}

/* ホバーされていないグリッド内の全てのアイテムを選択 */
.grid:has(.grid__item:hover) .gird__item:not(:hover) {

}AC

/* カスタム要素<todo-list>を含むコンテナを選択 */
main:has(todo-list) {

}


/*使用例　これが以下で表現できる*/
/* 画像あり用のスタイル */
.card {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* 画像なし用のスタイル */
.card--plain {
    display: block;
    border-top: 3px solid #7c93e9;
}
.card:has(.card__image) {
    display: flex;
    align-items: center;
}


/* 最大3個の子（0を除く3以下） */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}
 
/* 最大3個の子（0を含む3以下） */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}
 
/* ちょうど5個の子 */
ul:has(> :nth-child(5):last-child) {
	outline: 1px solid blue;
}
 
/* 10個以上の子 */
ul:has(> :nth-child(10)) {
	outline: 1px solid green;
}
 
/* 7～9個の子（境界を含む） */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 1px solid yellow;
}