下記のコードは.fcolタグが子要素に.childタグを持っているかどうかを判断しています。
#box_01 .enc .fcol figure {
width: 100%;
height: 5em;
border: 1px solid #000;
background-color: #ff7474;
}
#box_01 .enc .fcol:has(.child) figure {
background-color: #7477ff;
}
下記のコードは<div>タグの直後に弟要素<span>タグがあるかどうかを判断しています。
スパン
#box_02 .flx div:has(+ span) {
background-color: #7477ff;
}
同意チェックボックスがチェックされた際に送信ボタンのスタイルを変更するコード例です。
#box_04 form:has(#check:checked) button {
pointer-events: auto;
text-decoration: none;
}
figureがあるかないかで、レイアウトを変更します。
山田太郎
ウェブデザイナーです。経験年数は20年です。得意分屋は、建築関係、スクール塾関係です。
斎藤花子
リハビリの言語介護士です。患者さんの言語障害の緩和や社会復帰のお手伝いをしています。
#box_05 .card:has(figure) {
display: flex;
}
#box_05 .card:has(figure) figure {
width: 30%;
}
#box_05 .card:has(figure) .txt {
width: 67%;
margin-left: 3%;
}
#box_05 .card:has(figure) .txt .bold {
color: blue;
}
:not()を使用して、子要素が無い方を指定します。
#box_06 .enc .fcol:not(:has(.child)) figure {
background-color: #7477ff;
}