css - 要素がネストされている場合、CSS はスタイルを変更します

Question

ネストされた要素が存在する場合、CSS で親要素のスタイルを調整する方法はありますか?

たとえば、10px の左右にパディングがあるボタンがあるとします。

<button>Submit</button>

ここで、これにアイコンを追加するとしましょう:

<button><i class="icon"></i> Submit</button>

アイコンが原因で、ボタンの左側の間隔が広すぎます。ボタンに追加のクラスを追加せずに、ボタンに が含まれている場合<i>、左側のパディングを少なくする方法はありますか?

ありがとう！

Answer 1

残念ながら、現時点ではこれを行うことはできません。css4用に提案されています。

Answer 2

ターゲットに別の要素を使用する必要があるように思えます。これは、次のようなセマンティックな意味を持たない要素が役立つ場所<span>です。

<button><span class="text">Submit</span></button>
<button><i class="icon"></i> <span class="text">Submit</span></button>

その HTML を使用する場合は、代わりに/を使用してターゲット.textを設定できます。marginpadding