CSSセレクターを無効にするのではなく、有効にしたい

有効化セレクターとは、特定のルールを無効化せずに機能するセレクターのことです.以下の例を使って説明します.

リスト項目があり、最後の項目にマージンを追加したいとしましょう.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
<ul>

これが通常の無効化の方法です.

li {
  margin-bottom: 1em;
}

li:last-child {
  margin-bottom: 0;
}

まず、すべての要素に margin-bottom を追加します.次に、最後の要素の下マージンを無効にします. li:last-child セレクターは前のセレクターのルールを無効にするため、この手法をセレクターの無効化と呼びます.

しかし、セレクターを有効にすることで、より良い結果を得ることができます.

li:not(:last-child) {
  margin-bottom: 1em;
}

セレクター li:not(:last-child) は、最後の要素を除くすべての要素で margin-bottom を有効にしています.何も無効にする必要はありません.あなたが私に尋ねるなら、それは非常に読みやすく、保守しやすいです.

同じ例の有効化セレクターの別のバージョンを次に示します.

li + li {
  margin-top: 1em;
}

このバージョンでは、前の兄弟を持つすべての要素に margin-top を追加します.これは、前の兄弟を持たない最初の要素を除くすべての要素を意味します.

これで、より少ないコードでより良い仕事をするセレクターが有効になります.デモは次のとおりです.