!importantって下位階層の指定には勝てないんですか？

Question

実現したいこと

ピンポイントな答えが見つからなかったので優先順位の問題なのか、他の問題なのか判断できなくて不安です。タイトル通りだったらせやでって言ってもらって安心したいです

前提

!importantは!importantにしか勝てないとみんな書いてたので最優先で適用したい値に!importantをつけた

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

子がオーバーライドしている値に負けてしまった

該当のソースコード

#test12 table{width:50%;}
#test12 label{display:block;}

#test12{
--layerA:0;
--layerB:#F0F;
--row-bgcolor:#F0F;

--color-a0:#F00;
--color-a1:#FF0;
--color-a2:#000;
--color-b0:#0F0;
--color-b1:#0FF;
}
.a0{--colorA:var(--color-a0);}
.a1{--colorA:var(--color-a1);}
.b0{--colorB:var(--color-b0);}
.b1{--colorB:var(--color-b1);}

[class*="a"]{
  --layerA:linear-gradient(90deg, var(--colorA) 25%,transparent 75%),;
}
[class*="b"]{
  --layerB:var(--colorB);
}

#test12 tr,
#test12 li label{
  --row-bgcolor:var(--layerA, )var(--layerB);/* 勝ちたい相手 */
  background:var(--row-bgcolor);
}
.a2{
  color:#00F;
  --row-bgcolor:var(--color-a2)!important;/* 勝ってほしい値 */
}

<div id="test12">
<table>
<tr class="a0"   ><td>a0</td><td>  </td></tr>
<tr class="a0 b0"><td>a0</td><td>b0</td></tr>
<tr class="a1 b0"><td>a1</td><td>b0</td></tr>
<tr class="a2 b0"><td>a2</td><td>b0</td></tr>
<tr class="b1"   ><td>  </td><td>b1</td></tr>
<tr class="a0 b1"><td>a0</td><td>b1</td></tr>
<tr class="a1 b1"><td>a1</td><td>b1</td></tr>
<tr class="a2 b1"><td>a2</td><td>b1</td></tr>
<tr class="a2"   ><td>a2</td><td>  </td></tr>
</table>
<ul>
<li class="a0"   ><label><!-- inputがあるてい-->a0</label></li>
<li class="a0 b0"><label>a0 b0</label></li>
<li class="a1 b0"><label>a1 b0</label></li>
<li class="a2 b0"><label>a2 b0</label></li>
<li class="b1"   ><label>b1   </label></li>
<li class="a0 b1"><label>a0 b1</label></li>
<li class="a1 b1"><label>a1 b1</label></li>
<li class="a2 b1"><label>a2 b1</label></li>
<li class="a2"   ><label>a2   </label></li>
</ul>
</div>

もともとliに背景色を指定してたのですが、なんかいろいろあってlabelに背景色をつけるように変更したところ、a2はtrには勝てるがlabelには負けるようになってしまった

試したこと

もっとごっちゃりしてたのを簡素にしたのが↑です

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

edgeでしか確認してません

Answer 1

直接対象となる要素のスタイルは、継承されたルールの詳細度に関係なく、常に継承されたスタイルよりも優先されます。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#%E7%9B%B4%E6%8E%A5%E5%AF%BE%E8%B1%A1%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%A8%E7%B6%99%E6%89%BF%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB

継承されたスタイルは、直接要素に指定されたスタイルよりも優先度は低くなるようです。

背景色はlabel( #test12 li label )で設定しているが、
変数は祖先のli( .a2 )に対して設定されているため、
直接の要素で指定されているimportantなしの方が適用されるようです。

なので、背景色設定自体は直接要素#test12 li label、
色変数は親要素#test12 liで定義すれば、
.a2のimportantで勝てるようです。

Comments

[mumyochitaru]

ありがとうございます！安心しました！
なんかいろんなことを文章的な理解をしてないので説明するのも探がすのも読むのも難しかったので大変助かりました

Answer 2

おもしろい質問ですね。

きちんとした論拠を提示できないのが心苦しいのですが、たぶん、変数のスコープの問題だと思います。
下記記事に「CSS 変数のスコープ（適用範囲）は CSS セレクタ内になります」とあるように、var(--color)などで呼び出す直近の変数指定（--color:red;など）が優先される仕様なのではないでしょうか。

---

【CSS の新機能：CSS 変数（Custom Properties）、pointer-events】
https://www.webdesignleaves.com/pr/css/css_basic_12.html#h4_index_2

CSS 変数のスコープ（適用範囲）は CSS セレクタ内になります。

---

上書きするにはより対象（var(--color)など）に近い位置の要素に対し、その要素にある他の指定より高い詳細度で書く必要が在ると思います。同じ要素への指定については!importantも効果を発揮するようです。

.a2 label, .a2{
  color:#00F;
  --row-bgcolor:var(--color-a2)!important;/* 勝ってほしい値 */
}

動くサンプル：https://jsfiddle.net/21neph6c/1/

Comments

[mumyochitaru]

紹介していただいた記事みてみました
fooとbarは他人だから変数の共有はできないといよという話みたいなのでほしい情報ではないようです

なくていいと思って簡略化した時に省いたのですが、簡略化前の大本では↑のソースでいう行15~18で文字や枠線の色もセットしていて、子であるtdないしlabelに届いているのでスコープの問題ではないっぽいです
後だしになってしまい申し訳ない

[kei344]

ここのことでしょうか。
<li class="a0 b0"><label>a0 b0</label></li>
<li class="a1 b0"><label>a1 b0</label></li>
<li class="a2 b0"><label>a2 b0</label></li>
問題を再現できるコードを質問文に追記していただけませんか？

また、「スコープ」についてのイメージが私が間違っているかもしれません。
私は、「CSSの指定の重さ」ではなく「HTMLの要素の近さ」が優先されると思っています。
<a id="r" class="s1">[s1で指定した変数のスコープ <b class="s2">[s2で指定した変数のスコープ ]</b>]</a>
#r {
--c: red;/*これに !important をつけても.s2では優先されない*/
}
.s1 {
--c: yellow;/* これに !important をつけたら「s1で指定した変数のスコープ」が黄色に変わる */
color: var(--c);
}
.s2 {
--c: blue;
color: var(--c);/*こちらが優先*/
}
https://jsfiddle.net/wxkom6qc/

「s1で指定した変数のスコープ」の中に新たなスコープ「s2で指定した変数のスコープ」が出来るイメージとか、直近のスコープから順番に変数を探しに行くイメージとか、そんな感じです。

[mumyochitaru]

前回の返信中のソースとはcssをさしてました。省略した内容は例えば以下です
.a0{
--colorA:var(--color-a0);
--textA:red;
--borderA:blue;
}
この追記した２つの変数は背景色を適用させたい子要素まで届くので条件が等しい.a2が持つ変数のスコープも問題はありません
スコープは順位に関与しないので範囲が届いている以上は私の疑問とは関係ないことがわかりました

質問の焦点だったタイトルがわかりづらかったため混乱させてしまったようでごめんなさい
「!importantは継承先では弱くなるのか？」が正しいタイトルだったっぽいです
質問に興味を持ってくれてありがとうございました