Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

隣接セレクタの挙動について

Q&A

Closed

解決したいこと

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

2Answer

~は、ある要素の後ろにいる指定された全ての要素を選択します。
なので.item~.item~.itemは、「.itemの後ろにある全ての.item」の後ろにあるすべての.itemになります。なのでdiv2は選択だれませんね。

仕様を注意深く読めばわかります。
CSS Selectors Reference

0Like

Comments

  1. @yuuki-nakamura

    Questioner

    ありがとうございます、難しく考えすぎていましたね
    左から読むとその通りだと納得しました。

    あと、もしよろしければ右から解釈するとすると、
    どういった感じで扱われるかご説明願えないでしょうか?

Your answer might help someone💌