~は、ある要素の後ろにいる指定された全ての要素を選択します。
なので.item~.item~.itemは、「.itemの後ろにある全ての.item」の後ろにあるすべての.itemになります。なのでdiv2は選択だれませんね。
仕様を注意深く読めばわかります。
CSS Selectors Reference
Like!
隣接セレクタの挙動について
解決したいこと
A.内部的な挙動の詳細を教えて頂きたいです。
B.こういった挙動を調査する手段（ブラウザのコードを読むしかないですか？）も可能なら教えて頂きたいです。
発生している問題・エラー
CSSセレクタが右から左に解釈されるのは承知しているつもりですが、
書いてみたコードが思っていたのと違う挙動を示したので、
本来どういう動作をしているのか教えて頂きたいです。
自分の想定：
１．.itemクラスを付与された要素を選ぶ
→div1,2,3,4,5が選ばれる
２．自身の兄要素が.itemである要素に限定する
→div2,3,4,5に限定
３．自身の兄要素が.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
2Answer
0
Comments
@yuuki-nakamura
Questionerありがとうございます、難しく考えすぎていましたね
左から読むとその通りだと納得しました。
あと、もしよろしければ右から解釈するとすると、
どういった感じで扱われるかご説明願えないでしょうか？
@itagakiさん
ありがとうございました。
Like!