CSS3 疑似クラスセレクターの簡単なレビュー

序文

CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これらの紛らわしいセレクターをコピーしたり学習したりしているのであれば、あなたは正しい場所に来ています、私の古い友人よ。

この記事では、それぞれの機能を直接比較して、すぐに習得できるようにします。

• 第一子
• 最後の子
• 最初のタイプ
• 最後のタイプ
• 一人っ子
• 唯一のタイプ
• n番目の子
• 最後の n 番目の子
• n番目のタイプ
• 最後の n 番目のタイプ

第一子と末子

次の 2 つのセレクターは、兄弟セットの最初の要素と一致します。

注: このセレクターが機能するには、実際に満たす必要がある条件が 3 つあります。

• 前のセレクタに一致します。この場合はp
• 兄弟要素のグループである
• 最初の（または最後の）要素である

ここではlast-childについて詳しく説明しません。違いは、後ろから前に向かって一致することです。

最初のタイプと最後のタイプ

これらの 2 つのセレクターは、要素が実際にグループ内の最初の (最後の) 要素であるかどうかに関係なく、同じタイプの最初の (最後の) 要素と一致します。

注: このセレクターが機能するには、実際に満たす必要がある条件が 2 つあります。

• 前のセレクタに一致します。この場合はp
• 兄弟要素のグループである

ここではlast-of-typeについて詳しく説明しません。違いは、後ろから前に向かって一致することです。

唯一の子と唯一の型

only-child兄弟要素を持たない要素、つまり「孤立した」要素に一致します。

上図の「分離された」要素は最初の<p>とネストされた<span>であり、どちらもセレクターによって一致します。

only-of-type兄弟要素のセットの中で一意の型の要素に一致します。

最初の<p> 、2 番目の<p> 、および最後の<span>はすべて親要素タイプ内で一意であるため、セレクタによって一致します。

n 番目の子と n 番目の最後の子

これらの疑似クラス セレクターの最も興味深い点は、式an+bを渡して、この式に従って要素を一致させることができることです。この式を操作する方法は多数あるため、多くの人がこの式と一致するコンテンツのすべての組み合わせを記憶しています。

実際、数学的な観点からルールを理解するのは非常に簡単なので、私たちの考え方は CSS によって固められています。たとえば、次のコードがあります。

<スタイル>
  p:n番目の子(2n+1){
    色:青;
  }
</スタイル>
<本文>
  <p>最初の行</p>
  <p>2行目</p>
  <p>3行目</p>
</本文>

思考モード:

1. まず、一致した要素を収集します。この例では、3つの<p>タグです。
2. 添え字 0 から 2 までを数えて<p>の数を表し、それを数式に代入して評価します。
3. 要素を対応する添え字と一致させます（要素の添え字は1から始まります）

結果：