隣接セレクタの挙動について
解決したいこと
A.内部的な挙動の詳細を教えて頂きたいです。
B.こういった挙動を調査する手段(ブラウザのコードを読むしかないですか?)も可能なら教えて頂きたいです。
発生している問題・エラー
CSSセレクタが右から左に解釈されるのは承知しているつもりですが、
書いてみたコードが思っていたのと違う挙動を示したので、
本来どういう動作をしているのか教えて頂きたいです。
自分の想定:
1..itemクラスを付与された要素を選ぶ
→div1,2,3,4,5が選ばれる
2.自身の兄要素が.itemである要素に限定する
→div2,3,4,5に限定
3.自身の兄要素が.itemである要素に限定する
→div2,3,4,5に限定
(ここでdiv2も対象に載ると思っていました)
実際はdiv3,4,5のみセレクタの対象となっていて、
どうしてこうなるのかわからず質問させていただきました。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item~.item~.item {
color: red;
}
</style>
</head>
<body>
<div class="item">div1</div>
<div class="item">div2</div>
<div class="item">div3</div>
<div class="item">div4</div>
<div class="item">div5</div>
</body>
</html>
自分で試したこと
調べてみたのですが情報が見つけられませんでした。
0