SCSSで直下の要素を指定してhoverの処理をしたい

Question

下記hamlの親要素.header__inner__nav__left__category__treeContainer__parent
の中の =link_toつまりaタグをhoverした時に、その下にある.header__inner__nav__left__category__treeContainer__parent__childrenがdisplay:blockによって表示されるという実装を行いたいのですが、SCSSのa:hover &__childrenという記述ではうまくhoverが作動してくれません。a:hoverでは直下のaが指定されないのでしょうか。大変お手数ですが、ご教示頂けると幸いです。

.header__inner__nav__left__category__treeContainer__parent
            - @parents.each do |parent|
              = link_to "#{parent.name}", class: "parent_category",id: "#{parent.id}"
              .header__inner__nav__left__category__treeContainer__parent__children
                - parent.children.each do |child|
                  = link_to "#{child.name}", class: "child_category",id: "#{parent.id}"

 &__parent{
              position:relative;
              a:hover &__children{
                display:block;
                background-color:red;
                position:absolute;
                top:7px;
                left: 236px;
                width: 240px;
                height: 417px;
              }

Answer 1

a:hoverでは直下のaが指定されないのでしょうか。

CSS以前の問題として、<a>の子孫要素に<a>を入れることはできません。

許可されている内容 透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの（引用者注：<a>は対話型コンテンツに区分されます）

許可されている親要素 記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く（MDNより）

Comments

[paison]

早速のご回答ありがとうございます。
今回の実装では、それぞれに親要素の<div>を持っておりますので、<a>の子要素に<a>を入れておりません。

[maisumakun]

> <a>の子要素に<a>を入れておりません。

子孫要素として存在できません。

https://momdo.github.io/html/text-level-semantics.html#the-a-element

「子孫となるa要素が存在してはならない。」

[maisumakun]

（最初に上げたMDNだと「記述コンテンツであれば<a>も存在できる」と読めてしまうなあ）

[paison]

ご回答ありがとうございます。そういうルールがあったんですね！おそらくul,liにて記述し直して親子関係を実現するしか内容ですね！