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擬似クラスは、スペースでさえなく、子要素のない要素を選択できます。:emptyCSSは、インデックス値に基づいて要素を一致させるが、特定のタイプの要素に限定されている型インデックス擬似クラスを提供します。これらには、 - 、
: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を見てみましょう：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>下の写真でそれがどのように見えるかを見ることができます。
: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()
と:nth-child()
:nth-last-child()
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
に切り替えるとこのバンドが逆になります。
:nth-child:nth-last-child
:nth-child()および:nth-last-child()を使用して、特定の場所で個々の子要素を選択できます。特定の位置の後にのすべての子要素を選択するか、オフセットで倍数ごとに要素を選択できます。 6番目のプロジェクトの背景色を変更しましょう：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
グラマーが作用する場所です：An B
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
および:nth-child()を使用して、ポイント後にすべての要素を選択できます。最初の7つの要素を除くすべての要素を選択してみましょう。
:nth-last-child()
.item:nth-child(6) {
background: #e91e63;
}
注：負のオフセット
負のオフセットと範囲値も有効です。
を使用すると、選択が逆になり、最初の8つの要素が一致します。
:nth-child(-n 8)オフセットとステップサイズの値を使用して3つの要素ごとに選択することもできます。
次の画像でこのセレクターの結果を見ることができます。
.item:nth-child(3n) {
background: #e91e63;
} 
要素が別の要素の:only-child
の子である場合、:only-child
.item:nth-child(n+8) {
background: #e91e63;
} :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つあります。
-
: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
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>擬似クラスも同様に機能します。これは、以下に示すように、その親要素の最後の要素と一致します。ただし、要素がその親要素の
sユニークである場合、
は以下に示すようにその要素と一致します。
:first-of-typeを使用して別の例を見てみましょうが、今回は擬似要素を使用してください。この章で前述した::first-letterpseudo-elementをまだ覚えていますか？ご覧のとおり、それはそれを適用する各要素の初期大文字を作成します。さらに一歩進んで、この初期大文字を最初の段落に制限しましょう：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
および: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()キーワードを使用できます。
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
同様に、
を使用して偶数番号のp要素を選択しますが、カウントはドキュメントの最後のp要素（この場合は以下を参照）で始まります。 :nth-last-of-type(even)
[5]この構文は、CSS構文モジュールレベル3で説明されています。 An B
CSS擬似クラスとインデックスベースの要素スタイルに関する
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>
クラスセレクターを使用して
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
以上がCSS疑似クラス：インデックスに基づくスタイリング要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7893
15
1651
14
1411
52
1302
25
1248
29
Vue 3
Apr 02, 2025 pm 06:32 PM
それは＆＃039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。
ブラウザから有効なCSSプロパティ値を取得できますか？
Apr 02, 2025 pm 06:17 PM
私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。
WordPressブロックエディターでのマークダウンとローカリゼーションを使用します
Apr 02, 2025 am 04:27 AM
WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか？
粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード
Apr 03, 2025 am 10:30 AM
先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。
レスポンシブデザインのブラウザを比較します
Apr 02, 2025 pm 06:25 PM
これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます
スティッキーヘッダーとフッターにCSSグリッドを使用する方法
Apr 02, 2025 pm 06:29 PM
CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは
Googleフォント変数フォント
Apr 09, 2025 am 10:42 AM
Google Fontsが新しいデザイン（ツイート）を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません
