has()の基本_2

a要素の子要素の有無による適用

ただのテキストリンク
子にspan要素のあるリンク

#box01 a:has(span) {
	text-decoration: none;
}
#box01 a:has(span):hover {
	text-decoration: underline;
}
#box01 a:has(img) {
	width: 150px;
}
#box01 a:has(img):hover {
	opacity: 0.5;
}

子要素の一部の適用が、全体の要素に適用する

• どれかがHoverすると全体が変化する-1
• どれかがHoverすると全体が変化する-2
• どれかがHoverすると全体が変化する-3
• どれかがHoverすると全体が変化する-4
• どれかがHoverすると全体が変化する-5

#box02 ul:has(a:hover) li a {
	background-color: #0a02b4;
}

要素が3個以上、4個以上の場合適用する

• リスト1
• リスト2

• リスト1
• リスト2
• リスト3

• リスト1
• リスト2
• リスト3
• リスト4

#box03 ul:has(li:nth-last-child(n+3)) li {
	background-color: #138001;
	color: #fff;
}
#box03 ul:has(li:nth-last-child(n+4)) li {
	width: 50%;
}

直後にfigureタグある場合に適用する

普通の見出し

出生地はロンドン。黎明期の電子計算機の一つであるManchester Mark Iの開発チームに参加していた数学者夫妻コンウェイ・バーナーズ＝リーとメアリー・リー・ウッズのもとに生まれる。

直後にfigureタグがある見出し

バーナーズ＝リーが CERN で使用したNeXTcube。初のWebサーバとなった。

#box04 h4:has(+ figure) {
	color: red;
	text-decoration: underline;
}