であれば、私は私のULの最後のLIタグのルールを設定している以外の最後の子を選択します。それはまた、最初の子
.className li:last-child {
stuff: here;
}
は、私が「これを適用すると言うCSSでルールを設定することができアムもfirst-child "である場合を除いて、最後のLIタグにスタイルを適用します。つまり、OLにLIタグが1つだけあります。
https://css-tricks.com/almanac/selectors/o/only-child/
としてだけでなく、あなたが:last-childセレクタが変更されたものを上書きするこれらを使用することができ:only-of-typeセレクタ
https://css-tricks.com/almanac/selectors/o/only-of-type/
：
最初の子最後の子
:not()を選択セレクタ。
CSS擬似クラス
:not(X)引数として単純セレクタXをとる関数表記です。引数で表されていない要素と一致します。
li:last-child:not(:first-child) {
color: red;
}<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
<ul>
<li>only item</li>
</ul>は:only-childセレクタがあります。それは最初の子である場合
だけの事はIでありますしないそれが唯一の子供なら別のスタイルを設定しなければならない。私は「ULに複数のLIがある場合にのみこのスタイルを適用する」と言いたいと思います。 –
あなたはそれがあるとして、あなたのCSSを残して、それを上書きするルールを追加することができます。
/* Select the last child if it is not the first child */
li:last-child:not(:first-child) {
stuff: here;
}
I：また
/* What should happen in the last child */
.className li:last-child {
stuff: here;
}
/* If there is only one child the previous one will be overwritten by this one */
.className li:first-child {
/* default values */
}
、あなたはより高度なものを使用することができます2番目を使用しますが、これはCSSに精通しているかどうかによって異なります。より解析的に
：
は:last-child - そうでない場合は:first-child - - あなたは:not()でそれを一緒に使用することができます問題は、最初の子を定義してLIのスタイルを再び設定する必要があることです。 –
私の編集をチェックしてください。 –
あなたは最初の子を選択するからそれを防ぐためにli:last-childのような化合物のセレクタの前に* +を付加することができます
.className > * + li:last-child {
color: red;
}<ul class="className">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
<ul class="className">
<li>only item</li>
</ul>
まさに私が何をしていたのか。完璧。 –