とある要素の直前の要素をCSSセレクタで指定したくなった。
<div>hoge</div> ←これを選択したい <div class="fuga">fuga</div> ←ここから見て <div>moge</div>
結論から言うとCSSセレクタではこれは無理っぽい。
兄弟要素(階層が同じ要素)の弟（後に出てくる要素）は選択できるんだけど、
兄（前に出てくる要素）を選択するセレクタはないらしい。。。
DOMの構造見直すか、JavaScript使ってどうにかするしかあるまい。
jQueryなら「.prev()」とかでいけるかな？jQuery使ってないけど。
で、ここから調べてる中で「コレ間違ってるんじゃないかな？」って思った話。
「CSS 直前の要素」でググって出てくるサイトは一杯あるのですが、
疑似要素のbeforeとafterでちょいちょいヒットしてる。
見てみると、beforeの説明でこんな内容になってる。
:before 要素の直前
とか
before / afterでそれぞれ要素の前後に[擬似要素]を追加することができます。
ん？って感じ。
↑の説明だと、構造的に下記をイメージしますよね？
<::before /> <div /> <::after />
要素の直前だからね。実際↑書いてるサイトの構造のイメージはそうなってた。
でも、MDNにはこう書いてある。
In CSS, ::before creates a pseudo-element that is the first child of the selected element.
CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。
子要素として 擬似要素を作成します
ですよね。
chromeあたりの開発ツールで見ると分かるのですが、どう見ても指定してる要素の
子要素として作ってるよね？
構造的には下記。
<div class="hoge"> <.hoge::before /> <something.... /> <.hoge::after /> </div>
直前の要素って説明は間違ってると思うのです。
書くなら「before:直下の最初の子要素」とか「after:直下の最後の子要素」が正確な表現かしら？
