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> </本文> 思考モード: まず、一致した要素を収集します。この例では、3つの`<p>`タグです。添え字 0 から 2 までを数えて`<p>`の数を表し、それを数式に代入して評価します。要素を対応する添え字と一致させます（要素の添え字は1から始まります）結果：

序文

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

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

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

第一子と末子

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

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

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

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

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

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

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

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

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

唯一の子と唯一の型

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

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

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

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

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

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

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

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

思考モード:

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

結果：

式	説明する
2n	すべての偶数要素
2n+1	すべての奇数要素
n と n+1	すべての要素
2+2 番目	2 番目の要素以降の要素 (2 番目の要素を含む)
3+3 番目	3番目の要素以降の要素（3番目の要素を含む）
0オン	一致するものはありません
3n+4	4、7、10、13 ....
1	最初の要素のみに一致
-n+2	最初の2つの要素のみに一致します
n番目の子(奇数)	奇妙な要素
n番目の子(偶数)	偶数要素

ただし、 nth-child依然として同じ兄弟要素のセットに一致することを忘れないでください。興味深いのは、 nth-childセレクターを使用してフィルタリングしますが、スタイルを適用するときに、一致した要素にスタイルを適用しないことです。

上の図では、 <div>内の 2 つの要素のグループが兄弟要素として一致していますが、興味深いことに、3 番目の要素「3 行目」も一致しています。つまり、一致した要素ではなく、兄弟要素のグループにスタイルが直接適用されます。ただし、図の「3 番目のグループ」のが<div>である場合、異なるタイプのスタイルは適用されないことに注意してください。

nth-last-childは後ろから前へのバージョンですが、ここでは詳細な例は示しません。

MDN では、要素の数に応じて要素のスタイルを制御できる興味深い例も紹介されています。

li:n番目最後の子(n+3)、
li:n番目最後の子(n+3) ~ li {
  色: 赤;
}

<h4>4 つの項目のリスト (スタイル付き):</h4>
<オル>
  <li>1つ</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

<h4>2 つの項目のリスト (スタイルなし):</h4>
<オル>
  <li>1つ</li>
  <li>2</li>
</ol>

n 番目のタイプと n 番目の最後のタイプ

nth-of-type :