CSSセレクター解説：「div ~ div」と「div:not(:first-of-type)」の違いとは？

結論：マッチする要素は同じ

div ~ div（一般兄弟結合子）と div:not(:first-of-type) は、マッチする要素という点ではまったく同じです。どちらのセレクターも「共通の親を持つ兄弟要素の中で、最初の div 以外のすべての div」に一致します。

それでは、具体的なHTMLの例を使って、各セレクターがどの要素に一致するのかを確認してみましょう。

<section>
    <div></div> <!-- div:first-child または div:first-of-type -->
    <div></div> <!-- div+div / div~div / div:nth-of-type(2) -->
    <p></p>
    <div></div> <!-- div+p+div / div~div / div:nth-of-type(3)。ただし div+div は不一致 -->
</section>
<section>
    <h1></h1> <!-- h1:first-child -->
    <div></div> <!-- div:first-of-type / div:nth-child(2) -->
    <div></div> <!-- div~div / div:nth-of-type(2) / div:nth-child(3) -->
</section>

この例からわかるように、div ~ div は「直前・直前以外を問わず、前に div 兄弟が存在する要素」に一致し、div:not(:first-of-type) は「同種の要素の中で最初ではない div」に一致します。結果として、両者が指す要素の集合は常に同一になります。

実際の違いは「詳細度（Specificity）」

両者の実質的な違いは、CSS の詳細度（specificity）にあります。もし同じ要素に対して、両方のセレクターを使用した CSS ルールが定義されている場合、div:not(:first-of-type) を含むルールの方が優先的に適用されます。

これは、:first-of-type 疑似クラスが詳細度を引き上げるためです。具体的には、div ~ div の詳細度は型セレクター2つ分の「(0,0,2)」である一方、div:not(:first-of-type) は疑似クラス1つと型セレクター1つ分の「(0,1,1)」となり、後者の方が高い優先順位を持ちます。

使い分けのポイント

スタイルの適用結果は同じでも、コードの意図が伝わりやすさという観点で使い分けるとよいでしょう。div ~ div は「ある要素の後に続く要素」という構造上の関係を表現するのに向いており、div:not(:first-of-type) は「先頭以外の要素すべて」という除外条件を明示したい場合に適しています。