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);
}同様に、aはステップ長間隔です。 1で始まるNの乗数のようなものです。したがって、a = 3の場合、3nは3、6、9などの要素と一致します。以下で見ることができるように、これはまさに起こることです。
および:nth-child()を使用して、ポイント後にすべての要素を選択できます。最初の7つの要素を除くすべての要素を選択してみましょう。
:nth-last-child()
.item:nth-child(6) {
background: #e91e63;
}
<p> </p>
注：負のオフセット
負のオフセットと範囲値も有効です。
を使用すると、選択が逆になり、最初の8つの要素が一致します。
:nth-child(-n 8)オフセットとステップサイズの値を使用して3つの要素ごとに選択することもできます。
次の画像でこのセレクターの結果を見ることができます。
.item:nth-child(3n) {
background: #e91e63;
} <p></p>
要素が別の要素の:only-child
の子である場合、:only-child
.item:nth-child(n+8) {
background: #e91e63;
}<p></p>
: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つあります。
-
: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要素を選択しますが、カウントはドキュメントの最後の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 サイトの他の関連記事を参照してください。
CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PMCSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。
CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。
CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PMこの記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています
CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PMこの記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。
CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。
CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。
CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PMこの記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。
CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7925
15165214141152130325124929