[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない）

1. :not(::first-line)は無効になる

title-listクラスのリスト要素（li）の各一行目を太字にしています。
このCSSセレクタは、

.title-list li::first-line

二行目以降にスタイルを設定したいと思いました。

一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。

.title-list li:not(::first-line)

しかし、これはうまくいきません。

擬似要素である::first-lineは、:not() の引数に指定できません。

これは :not()擬似クラスの仕様によります。
:not() は擬似クラスにのみ適用可能で、擬似要素には使えないからです¹。

:not() は CSS の擬似クラスです。
列挙されたセレクターに一致しない要素を表します。
特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

:not() 擬似クラスのカッコの中（引数）には、1つまたは複数のセレクターをカンマで区切って入れます。
ただし、は否定セレクターや擬似要素を含めることはできません²。

また、:not() は「Xでない」ものすべてに一致するので、予想外の結果になることが多いので注意が必要です。
特に子孫結合子と使用すると、対象とする要素を選択する経路が複数できるので、意外な動きをするかもしれません。

::first-line 擬似要素は、内容の最初の行にのみ適用されるスタイルを定義するもので、それ以外の行を選択するようなセレクタは現時点のCSSの仕様にはありません。

最初の行以外のスタイルを指定したい場合は、全体のスタイルを指定した上で、::first-line 擬似要素を使って最初の行だけ別のスタイルを指定するのが一般的です。

.title-list li {
/* 全体に適用されるスタイル */
   color: black;
}
.title-list li::first-line {
/* 最初の行にのみ適用されるスタイル */
   color: red;
}

つまり、最初の行以外のスタイルを指定するには、「最初の行以外」を直接選択するのではなく、全体のスタイルを指定してから、最初の行だけ別のスタイルを上書き適用する方法を使います。

擬似クラス（:〜）と擬似要素（::〜）は似ていますが、役割と動作に違いがあります。

簡単に言うと、

擬似クラス（Pseudo-classes）

擬似クラスは単一のコロン（:）を使って表記されます。
例: :hover, :active, :focus, :first-child など。
要素の特別な状態を選択するために使用されます。
たとえば、要素の動的な状態（リンクの訪問状態、マウスホバー状態など）や、要素の構造的な関係（最初の子要素、偶数番目の要素など）に基づいて要素を選択します。
実際のHTML構造を変更せずに、既存の要素に対して適用されます。

擬似要素（Pseudo-elements）

擬似要素はダブルコロン（::）を使って表記されます。
例: ::before, ::after, ::first-line, ::first-letter など。
要素の特定の部分を選択したり、要素の一部を装飾したりするために使用されます。
たとえば、要素の一部分に対してスタイルを適用したり、要素の前後に装飾的なコンテンツを挿入したりするために使用されます。
仮想的な要素を生成し、それに対してスタイルを適用します。

擬似クラスと擬似要素は、連結して組み合せることはできます。³。

たとえば、「 <article> 要素内にある最初の <p> 要素の最初の行を選択したい」場合。

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

こちらもどうぞ。

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。 – :not() – CSS: カスケーディングスタイルシート | MDN
:not() – CSS: カスケーディングスタイルシート | MDN
擬似クラスと擬似要素 – ウェブ開発を学ぶ | MDN

QRコードを読み込むと、関連記事を確認できます。