CSS疑似クラス：インデックスに基づくスタイリング要素

CSSセレクター：ドキュメントサブツリーの要素の位置に基づく擬似クラスの選択

コアポイント

• CSSは、ドキュメントサブツリーの位置に基づいて要素を一致させるために、サブインデックスの擬似クラスと呼ばれるセレクターを提供します。これらには、:first-child、:last-child、:only-child、:nth-child()、:nth-last-child()、
が含まれます。
• :nth-child():nth-last-child()およびoddキーワード、整数、またはevenの形式でパラメーターを受け入れることができます。ここで、aはステップ間隔、bはバイアスシフト、Nは正の整数です。 An B 要素が別の要素の唯一の子である場合、
• pseudoクラスは要素と一致します。 :only-child擬似クラスは、スペースでさえなく、子要素のない要素を選択できます。 :empty
CSSは、インデックス値に基づいて要素を一致させるが、特定のタイプの要素に限定されている型インデックス擬似クラスを提供します。これらには、
• 、:first-of-type、:last-of-type、:only-of-type、:nth-of-type()、:nth-last-of-type()が含まれます。

CSSは、ドキュメントサブツリー内の位置に基づいて、一致する要素のセレクターも提供します。これらは、そのタイプ、属性、またはIDではなく、要素の位置または順序に依存するため、サブインデックス擬似クラスと呼ばれます。合計で5つあります：

• :first-child
• :last-child
• :only-child
• :nth-child()
• :nth-last-child()

:first-childおよび:last-child

名前から推測したように、:first-childおよび:last-child pseudoクラスを使用して、ノード（要素）の最初の子要素または最後の子要素である要素を選択できます。他の擬似クラスと同様に、:first-childおよび:last-childは、単純なセレクターによって定義された場合、副作用が最も少ない。

以下のHTMLとCSSを見てみましょう：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

下の写真でそれがどのように見えるかを見ることができます。

:first-childは制限されていないため、h2要素と最初のli要素はピンクです。結局のところ、h2はbodyの最初の子要素であり、liはul要素の最初の子要素です。しかし、なぜ残りのli要素が緑色なのですか？それは、:last-childも制限されていないためです。実際にulとbodyと入力しました。 *:first-child

単純なセレクターを追加することで:first-childおよび:last-childの資格を得た場合、これはさらに理にかなっています。項目をリストするために選択を制限しましょう。 :first-childをli:first-childに変更し、:last-childにli:last-childに変更します。次の図は、結果を示しています。

:nth-child()および:nth-last-child()

ドキュメントの最初と最後の子要素を選択できるのは素晴らしいことです。しかし、奇妙な要素や要素を選択したい場合はどうなりますか？ドキュメントサブツリーの6番目の要素を選択するか、3つの要素ごとにスタイルを適用する必要があります。これは、:nth-child()と:nth-last-child()擬似クラスが作用する場所です。

のように、:not()、:nth-child()、:nth-last-child()は機能的な擬似クラスです。彼らは次のようなパラメーターを受け入れます：

• oddキーワード
• evenキーワード
2または8などの整数、または
• 形式のパラメーター
• 、ここで、aはステップ間隔、bはオフセット、nは正の整数を表す変数です。 An B

最後のアイテムには複雑さがあります。後で説明します。

と:nth-child()の違いは何ですか？出発点：:nth-last-child()前方にカウント、:nth-child()逆カウント。 CSSインデックスは、0ではなく1から始まるカウント数値を使用します。 :nth-last-child()

との両方は、交互モードで使用できます。ゼブラパターンテーブルの列の色を作成することは、完璧なユースケースです。次のCSSは、偶数のテーブル列の水色の灰色の背景を提供し、結果は次の図で見ることができます。 :nth-child() :nth-last-child()

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

以下に示すように、カウントが下から始まるため、

に切り替えるとこのバンドが逆になります。

:nth-child:nth-last-child

より複雑なパラメーターの複雑な例を試す方法は？以下に示すドキュメントから始めます。これには20個のアイテムが含まれています。

<p></p>

:nth-child()および:nth-last-child()を使用して、特定の場所で個々の子要素を選択できます。特定の位置の後にのすべての子要素を選択するか、オフセットで倍数ごとに要素を選択できます。 6番目のプロジェクトの背景色を変更しましょう：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

これにより、次の結果が得られます。

しかし、3つの要素ごとに選択したい場合はどうなりますか？これは、

グラマーが作用する場所です：An B

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

同様に、aはステップ長間隔です。 1で始まるNの乗数のようなものです。したがって、a = 3の場合、3nは3、6、9などの要素と一致します。以下で見ることができるように、これはまさに起こることです。

物事がもっと面白くなる場所があります。

および:nth-child()を使用して、ポイント後にすべての要素を選択できます。最初の7つの要素を除くすべての要素を選択してみましょう。 :nth-last-child()

ここにはステップサイズの値はありません。したがって、n 8は、以下に示すように、8番目の要素から始まる各要素nと一致します。

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

<p> </p>

注：負のオフセット

負のオフセットと範囲値も有効です。

を使用すると、選択が逆になり、最初の8つの要素が一致します。

:nth-child(-n 8)オフセットとステップサイズの値を使用して3つの要素ごとに選択することもできます。

次の画像でこのセレクターの結果を見ることができます。

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

<p></p>

要素が別の要素の:only-child

の子である場合、 Appleを使用すると、最初のリストの唯一の子要素であるため、選択が選択されます。ただし、2番目のリストのアイテムは、3つの兄弟要素があるために一致しません。下の写真でどのように見えるかを見ることができます。 :only-child

<code class="language-css">.item:nth-child(n+8) {
  background: #e91e63;
}</code>

<p></p>

:empty

:emptyの要素なしで要素を選択することもできます。私たちがと言うとき、私たちは:empty空のを意味します。要素を:empty は一致しますが、<code><p></p><p> </p> は一致しません。 WysiWygエディターが空のP要素をコンテンツに挿入する場合があります。これらの要素にスタイルを適用することを避けるために、:emptypseudoクラスと組み合わせて使用​​できます。 :not() p:not(:empty)インデックスで特定のタイプの要素を選択します

前のセクションで説明した擬似クラスは、ドキュメントサブツリーの特定の位置を占める場合、要素と一致します。たとえば、

親要素の最後から2番目の要素である各P要素を選択します。

このセクションでは、入力されたサブインデックスの擬似クラスについて説明します。これらの擬似クラスは、インデックス値に基づいて要素も一致します。たとえば、5番目のp要素、または均一なインデックスを持つH2要素を選択します。

p:nth-last-child(2) 10の擬似クラスが5つあります。

<p> </p>

• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type()
これらの擬似クラスとサブインデックスの擬似クラスの違いは微妙です。ここで、5番目のアイテムがP要素である場合にのみ5番目のアイテムと一致し、
• はすべてのp要素と一致し、これらの要素の中に5番目のp要素を見つけます。 :nth-last-of-type()
少し異なるドキュメントから始めましょう。まだ20個のアイテムがありますが、それらのいくつかはP要素であり、一部はdiv要素です。以下に示すように、P要素には角が丸くなっています。

p:nth-child(5)p:nth-of-type(5)

、

、および

を使用します

を使用して、セレクターに一致する最初の要素を選択できます。最初のP要素にライムグリーンの背景をどのように提供しますか：:first-of-type :last-of-type :only-typeこれは、以下に示すように、その親要素の最初のP要素である各P要素と一致します。

:first-of-type

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

擬似クラスも同様に機能します。これは、以下に示すように、その親要素の最後の要素と一致します。ただし、要素がその親要素の

sユニーク

である場合、は以下に示すようにその要素と一致します。

:first-of-typeを使用して別の例を見てみましょうが、今回は擬似要素を使用してください。この章で前述した::first-letterpseudo-elementをまだ覚えていますか？ご覧のとおり、それはそれを適用する各要素の初期大文字を作成します。さらに一歩進んで、この初期大文字を最初の段落に制限しましょう：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

次の画像に示されているように、タイトルが先行する場合でも、段落に初期の大文字があります。

および:nth-of-type:nth-last-of-typeを使用します

および:nth-of-type()も機能的な擬似クラスです。彼らは、:nth-last-of-type()および:nth-child()と同じパラメーターを受け入れます。ただし、:nth-last-child()や:first-of-typeのように、インデックスは同じタイプの要素に解決します。たとえば、最初のp要素とその後の各p要素を選択するには、:last-of-type：oddで:nth-of-type()キーワードを使用できます。

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

下の画像からわかるように、これは奇数の子要素ではなく、奇数のP要素と一致します。

同様に、

を使用して偶数番号のp要素を選択しますが、カウントはドキュメントの最後のp要素（この場合は以下を参照）で始まります。 :nth-last-of-type(even)

これがまだぼやけているように見える場合は、Paul Maloneyのnth-Testツールを使用するか、nth Masterの例をご覧ください。両方のプロジェクトは、これらの擬似クラスについてさらに学ぶための優れた方法です。

---

[5]^この構文は、CSS構文モジュールレベル3で説明されています。 An B CSS擬似クラスとインデックスベースの要素スタイルに関する FAQ

CSS擬似クラスとは何ですか？

CSS擬似クラスは、セレクターに追加されたキーワードであり、選択した要素の特別な状態を指定するために使用されます。たとえば、ユーザーのポインターがその上に浮かんだときに、

を使用してボタンの色を変更できます。クラスとIDとともに、擬似クラスは、HTMLタグを変更せずに要素にスタイルを適用する方法です。 <p></p>

:nth-child擬似クラスはどのように機能しますか？

:nth-child擬似クラスは、同時要素のグループ内の要素の位置に基づいて要素を一致させます。関数のような構文:nth-child(an b)を使用します。ここで、「a」と「b」は整数値です。 「n」は0から始まるカウンターで、各要素の1回ずつ増加します。 「b」とは、最初の要素（b = 1）で始まる要素を選択することを意味します。

:nth-childと:nth-of-typeの違いは何ですか？

:nth-childは、すべての兄弟要素の要素の位置に基づいて要素と一致しますが、:nth-of-typeは同じタイプの兄弟要素の位置のみを考慮します。たとえば、 <code>p:nth-child(2) 要素の場合、2番目の子要素が選択され、<code><p></p>は2番目の <code>p:nth-of-type(2)要素を選択し、そのことに関係なく選択します。他の兄弟要素の位置。 <code><p></p>

指定されたクラス名を使用して、最初の要素、2番目、または3番目の要素を選択する方法は？

クラスセレクターを使用して

pseudo-classを使用できます。たとえば、:nth-childは、クラス「myclass」で最初の要素を選択します。これは、要素が親要素の最初の子である場合にのみ機能することを忘れないでください。 .myClass:nth-child(1)

で負の値を使用できますか？ :nth-child

いいえ、

負の値は許可されていません。使用できる最小値は0です。これは要素を選択しません。 :nth-child

それぞれまたは奇数要素を選択する方法は？

「ven」および「奇数」キーワードを使用して、

を使用して、それぞれまたは奇数要素を選択できます。たとえば、:nth-childは、最初の要素から始まる各2番目の要素を選択します。 :nth-child(even)

他の擬似クラスで

を使用できますか？ :nth-child

はい、他の擬似クラスと組み合わせて

を使用できます。たとえば、ユーザーのポインターが2番目の子要素の上にホバリングされているときに、:nth-childがスタイルを適用します。 :nth-child(2):hover

と:nth-childにパフォーマンスの違いはありますか？ :nth-of-type

ほとんどの場合、パフォーマンスの違いは無視できます。ただし、多数の要素を扱う場合、

は、同じタイプの兄弟要素のみを考慮しているため、おそらくわずかに高速です。 :nth-of-type

を使用できますか？ :nth-child いいえ、擬似要素はドキュメントツリーの一部とは見なされないため、

で使用できません。 :nth-child

ブラウザの互換性の問題はありますか？ :nth-child

すべての最新のブラウザはよくサポートされています

。ただし、Internet Explorer 8以前ではサポートされていません。これらのブラウザの場合、JavaScriptまたはjQueryを使用して同様の効果を達成する必要がある場合があります。 :nth-child

すべての写真は元の形式と場所に残ります。 <p></p>

以上がCSS疑似クラス：インデックスに基づくスタイリング要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。