[css]兄弟関係の兄の方をセレクタで指定する方法

最近寒いね。ヤッシーです。

みなさんcssのhover擬似クラスって知ってますか？
指定したセレクタの上にマウスが乗ってたら。。。ってやつなんですけど。

p:hover{
  color:red;
}

こういうやつ。この場合pタグの上にマウスあったら赤くなる。

自分の弟、子関係のタグに対しても指定できます。

p:hover+ a{
   color:red;
}

これはpの上にマウスがある時、自分の下にあるaの色を赤にします。

じゃあ親とか兄にも指定できるのか？

親は擬似的に指定できます。
兄はできるのか？
なぜか自分より上（兄）は指定できません。なんでだよ！！！

と思いきや、、、
最近追加された擬似クラス、hasでそれっぽいことができるらしいです。

調べまくって完璧に理解したので、解説していきます。

hasとは？
プログラムでいうif的な？
条件に一致するならcssを適応させるよっていうクラスです。

p:has(+a:hover){
  color:red;
}

これを文章化すると
pタグに隣接するホバーしてるaタグを持ってる時（has）、pタグの色を赤にする

つまりどういうことかというと、
弟タグから兄タグを操ってるわけではなく
兄タグが弟タグの状況に一致した時にcssを適応してるってことです。
擬似的に兄を操れてるね。