要素のCSSスタイルを定義することは可能ですか?これは、一致する要素に特定の要素が(直接の子アイテムとして)含まれている場合にのみ適用されますか?
これは、例を使用して説明するのが最適だと思います。
注:含まれている子要素に応じて、親要素をスタイル設定しようとしています。
<style>
/* note this is invalid syntax. I'm using the non-existing
":containing" pseudo-class to show what I want to achieve. */
div:containing div.a { border: solid 3px red; }
div:containing div.b { border: solid 3px blue; }
</style>
<!-- the following div should have a red border because
if contains a div with class="a" -->
<div>
<div class="a"></div>
</div>
<!-- the following div should have a blue border -->
<div>
<div class="b"></div>
</div>
注2:これはJavaScriptを使用して実現できることはわかっていますが、これが(私には)不明なCSS機能を使用して可能かどうか疑問に思いました。
ol < li:nth-child(n+10) { margin-left: 2rem; } ol < li:nth-child(n+100) { margin-left: 3rem; } ol < li:nth-child(n+1000) { margin-left: 4rem; }
理想的な世界では、これにより、含まれる子ol
の数に依存するマージンが増加li
し、左側のマージンがそれと同じ幅になるだけです。する必要がありました。