🐙

【CSS】疑似要素の数値が同一じゃないと上書きにならない

2024/03/05に公開

CSS

tech

問題

HTML&CSSコーディング・プラクティスブック 3 を勉強中、

以下のコードだとタブレット・PCでサイトを表示した場合もベース設定が反映されるらしいです。

※ モバイルファーストです。

/* ベース(モバイル)の設定 */
/* 最後から２番目までの値以外は、margin-bottom 20pxを持つ */
li:not(:nth-last-child(-n+2)) {
      margin-bottom: 15px;
}

/* タブレット・PC */
@media (min-width: 768px) {
	 /* 最後から３番目までの値以外は、margin-bottom 20pxを持つ */
	 li:not(:nth-last-child(-n+3)) {
        margin-bottom: 20px;
   }
}

上３つの画像は、@media内で設定された通りの動きになっています。

しかし、下の左端の画像は、ベースで指定された動きをしています。

同一セレクタと認識されていないだけなのでは？

と思ったので、メディアクエリ内に同じセレクタを指定してマージンを０にして実行してみました。

/* ベース(モバイル)の設定 */
/* 最後から２番目までの値以外は、margin-bottom 20pxを持つ */
li:not(:nth-last-child(-n+2)) {
      margin-bottom: 15px;
}

/* タブレット・PC */
@media (min-width: 768px) {

	  /* 追加 */
		li:not(:nth-last-child(-n+2)) {
        margin-bottom: 0;
  　}

		/* 最後から３番目までの値以外は、margin-bottom 20pxを持つ */
		li:not(:nth-last-child(-n+3)) {
        margin-bottom: 20px;
    }
}

やっぱり、セレクタが認識されていませんでした。

結論

結論というほどでもないですが、

:nth-last-child()の数値が一致していないと、同一セレクタとして認識してくれない
他の数値を指定する疑似要素に対しては試してませんが、数値の一致・不一致によってセレクタの認識が変わりそうだから注意

以上

問題

同一セレクタと認識されていないだけなのでは？

結論

Discussion