セレクタ: 直下の子要素が a でない li をセレクトしたい。

Question

前提・実現したいこと

直下の子要素が a でない li 要素を指定 (色をグレーに) する。

発生している問題・エラーメッセージ

(li:after):not(a) {color:grey;} または
(li+a):not(a) {color:grey;} では
a タグが続く li でも gray になることがある。

|li 階層|直下にリンク<a>タグ|結果スタイル|表示された色|
|:--|:--:|--:|
|1レベル目|あり|×狙いと異なる|グレー|
|2レベル目|あり|〇狙い通り|黒|
|2レベル目|なし|〇狙い通り|グレー|

(li:after):not(a) {color:grey;}

<ul>
  <li>
    <a href="#"> 1 レベル目リンク【あり】</a>
      <ul>
        <li><a href="#"> 2 レベル目リンク【あり】</a></li>
        <li> 2 レベル目リンク [なし]</li>
      </ul>
  </li>
</ul>

試したこと

li > after:empty {color:grey;}

補足情報（FW/ツールのバージョンなど）

実装方法としては JavaScript との組み合わせが必要になるのでしょうか?

ここにより詳細な情報を記載してください。

Answer 1

直下の子要素が a でない li 要素

定義が曖昧です

• 直下にa要素を含まないもの
• 子要素の最初のHTML要素がaではないもの

によって処理がかわります
またcssにはhasが実装されていないので、jsを絡めないと難しいと思います

Comments

[BetterEveryday]

yambejp さま、
早速の返信どうもありがとうございます。
「li タグの次に a タグが続く場合」を想定していたため後者かと思いますが、
前者の場合も自分が希望する内容にはなりそうです。
どちらにもしても css のみでは難しそうでしょうか?

[yambejp]

後者の場合、さらにテキストノードが関係してくる場合もあるので
単純ではありません。
また親が○○な子は拾えても、子が○○な親は現行のCSSの範疇ではありません

[BetterEveryday]

そうなのですね。では、JavaScript で実現する場合について調べてみて、
解決しない場合に再投稿するほうが良さそうですね。

[yambejp]

再投稿の必要はありません。jsのタグを追加して、質問にjsをつかってもOKと追記ください

[yambejp]

多分こんな感じで・・・
<style>
li{color:black}
li.gray{color:gray}
li a,li.gray a{color:inherit}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('li').forEach(x=>{
var flg=(x.querySelectorAll('a').length!=1 || x.querySelectorAll(':not(a)').length>0);
x.classList.toggle('gray',flg);
});
});
</script>
<ul>
<li>
<a href="#"> 1 レベル目リンク【あり】</a>
<ul>
<li><a href="#"> 2 レベル目リンク【あり】</a></li>
<li> 2 レベル目リンク [なし] </font></li>
</ul>
</li>
</ul>

[BetterEveryday]

yambejp さま、
コードを回答いただきましてどうもありがとうございます。いただいたものを単独で実行してみると、
flg 抽出の条件を以下のみに変更することで実現したかったことができました。
x.querySelectorAll('a').length == 0

ただ、自分のソースに追加してみると、1 レベル目は a タグリンクがなくても黒になってしまいます。
他の a タグ関連の色スタイルと競合しているのか、以下を確認いただくことはできませんでしょうか?

a { text-decoration:none; color:black;}
li.gray {color:gray}
a:link { color:#000; text-decoration:none; }
a:visited { color:#000; }
a:hover { color:#cc141c; }
a:active { color:#cc141c;}
a:hover span { color:#cc141c; }

footer nav ul { float:left;}
footer nav > ul > li > a { position:relative; display:block; padding-bottom:5px; }
footer nav > ul > li > a:after { content:""; display:block; width:90%; height:1px; background:#cc141c; position:absolute; bottom:0; left:0;}
footer nav > ul > li > div > ul >li:not(.title) > a:before { content:"- ";}

li a,li.gray a {color:inherit}

もしお時間あるタイミングがありましたら、よろしくお願いいたします。

[yambejp]

どのliにgrayクラスがつくかをよく検証してみてください
あとはgrayクラスに対してどうcssが反応しているかをみてもらえばよいでしょう

[BetterEveryday]

yambejp さま、
ヒントもいただきましてどうもありがとうございます。
自分のソースでもグレー定義に ul を追加することで動作確認できました。
ul, li.gray {color:gray}

yambejp さまのように CSS と JavaScript を瞬時に思い描けるように取り組んでいこうと思います。
一昨日から悩んでいましたのでたいへん助かりました。本当にどうもありがとうございました。