構造的な擬似クラス

Alexis Goldstein、Louis Lazaris、およびEstelle Weylが共著した本「HTML5＆CSS3 for the Real World、第2版」から抜粋した

この本は世界中の店舗で入手できます。また、ここで電子書籍バージョンを購入することもできます。

これまでのところ、属性と状態に基づいて要素を見つける方法を学びました。また、CSS3を使用すると、タグ内の場所のみに基づいて要素を配置することもできます。これらのセレクターは、構造的な擬似クラスに分類されます。

これらのセレクターは複雑に見えるかもしれませんが、後でそれらを適用する方法を見ると、より理にかなっています。 IE8以下を除いて、IE9および新しいバージョンとその他のすべてのブラウザはこれらのセレクターをサポートしています：

HTMLファイルでは、

:rootルート要素はhtml要素です。

E:nth-child(n)n番目のサブエレメントE. nパラメーターについては、以下の説明で説明します。

E:nth-last-child(n)n番目の子要素F（最後の1つのカウントダウン）。 li:nth-last-child(1)は、任意のリストの最後の項目と一致します。これはli:last-childと同じです（以下の手順を参照）。

E:nth-of-type(n)特定の親要素では、タイプEのn番目の要素はです。 nth-childとnth-of-typeの違いは、以下の説明で説明されています。

E:nth-last-of-type(n)はnth-of-type(n)と同じですが、親要素の最後の要素から始まります。

説明：構造セレクターのパラメーター

ブラケットのパラメーターとして方程式an bを使用するか、キーワードoddおよびevenを使用する4つの擬似クラスがあります。構造的な擬似カテゴリには、:nth-child(an b)、:nth-last-child(an b)、:nth-of-type(an b)、:nth-last-of-type(an b)が含まれます。方程式an bでは、aは整数として乗数、bは整数としてオフセット、nは常に変数nです。

最も簡単な場合、整数を渡すことができます。たとえば、E:nth-of-type(3)は、単一親要素の3番目のE要素の子を見つけます。 2つのキーワードのいずれかを渡すoddまたはevenを渡して、お互いの要素を見つけることができます。また、E:nth-of-type(3n 1)などの数値式をより効率的に渡すこともできます。 3nは、周波数を定義する3つの要素ごとに表し、1つはオフセットです。デフォルトのオフセットはゼロであるため、シリーズの3番目、6番目、および9番目の要素と一致し、nth-of-type(3n)は1番目、4番目、7番目などと一致します。 nth-of-type(3n 1)

負のオフセットも許可されています。 CSSは言語ベースであり、プログラミング言語ではないため、カウントは0ではなく1から始まります。乗数Aと可変nの間にスペースがあり、オフセットを最後に配置する必要があります。

これらの数字の擬似クラスを使用すると、クラスをタグに追加せずに見つけたい要素を特定できます。最も一般的な例はテーブルです。他のすべての行の色はわずかに暗いため、読みやすくなります。これを達成するには、それぞれに奇数またはクラスを追加しなければなりませんでしたtr。これで、マークに触れずに各奇数行を見つけるようにtr:nth-of-type(odd)を宣言することができます。 3色のストライプテーブルをさらに進めることもできます：位置tr:nth-of-type(3n)、tr:nth-of-type(3n 1)、tr:nth-of-type(3n 2)を使用して、それぞれに異なる色を適用することもできます。

E:first-childeがその親要素の最初の子である場合、それは要素Eです。これはE:nth-child(1)と同じです。

E:last-childeがその親要素の最後の子である場合、それは要素eであり、E:nth-last-child(1)と同じです。

:first-of-typeは:nth-of-type(1)と同じです。

E:last-of-typeは:nth-last-of-type(1)と同じです。

E:only-childeがその親要素の唯一の子である場合、それは要素Eです。

E:only-of-type親要素の直接子のタイプの唯一のE要素である場合、それは要素Eです。

説明：サブエレメントとタイプ

nth-of-typeおよびnth-childの構造セレクターを使用する場合、この場合に「サブ要素」と「タイプ」が何を意味するかを理解することが重要です。 「sube要素」は、一致するすべての子要素を表示し、前身が一致するかどうかを確認します。タイプ最初に、前身と一致するすべての要素を見て、カウントに従って一致します。

p:nth-child(3n)の場合、ブラウザは親要素の各3番目の子要素を表示します。子要素がPの場合、そうでない場合は一致しません。 p:nth-of-type(3n)の場合、ブラウザは親要素のすべてのPの子供を調べ、3つのPSごとに一致します。

構造的擬似クラスは親要素に基づいており、新しい親要素ごとに再びカウントを開始します。彼らは、親要素の直接的な子要素である要素のみを表示します。テキストノードは方程式の一部ではありません。

E:empty子要素のない要素

hello

および

は

と一致しませんが、p:empty

および

は一致します。このセレクターは、

などの空の要素または無効な要素にも一致します

and。 2文字の略語（ENなど）を使用する言語の要素。言語が要素自体または祖先で宣言されている場合、

（E:lang(en)属性が要素eの属性として存在する必要がある場合）とは異なり、E:[lang|=en]はEと一致します。 lang E:lang(en)

これは特に便利です。括弧内のセレクターに一致する要素を選択します。

:notは最初にドキュメント内のすべての段落と一致し、次にそのコレクションの著作権クラスもあるすべての段落を除外します。複数のp:not(.copyright)擬似クラスを一緒に参加できます。 :notタイプの要素またはラジオボタンの要素を除き、ページ上のすべての入力要素と一致します。 input:not([type=checkbox]):not([type=radio]) 構造的な擬似クラス

のFAQ

さまざまな種類の構造的擬似クラスは何ですか？

構造的な擬似クラスは、ドキュメントツリーの位置に基づいて要素を選択してスタイルを選択できるCSS擬似クラスのサブセットです。それらには、

、

、:root、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-child、:last-child、:first-of-type、:last-of-type、:only-child、 :only-of-type、:empty、

、

、および:nth-child()。これらの擬似クラスにはそれぞれ、より正確なスタイルのHTML要素を可能にするユニークな機能があります。

:nth-child()擬似クラスはどのように機能しますか？ :nth-child(2) :nth-child(odd):nth-child(2n 1)擬似クラスは、同じレベルの要素のグループでの位置に基づいて要素を一致させます。数字、キーワード、または式にできるパラメーターを受け入れます。たとえば、

は親要素の2番目の子要素を選択しますが、

または:nth-of-type()はすべての奇数の子要素を選択します。 :nth-child()

と:nth-of-type()の違いは何ですか？ :nth-child() :nth-child():nth-of-type()とliはどちらも位置に基づいて要素を選択しますが、これらの位置の計算方法は異なります。 pすべての要素をそのタイプに関係なく兄弟として扱いますが、:nth-child()は同じタイプの要素のみを計算します。たとえば、:nth-of-type()および要素のリストがある場合、liは両方のタイプの要素を計算しますが、pは、指定された要素に応じて

または

要素のみを計算します。

親要素の最初の子要素のスタイルを選択して設定するにはどうすればよいですか？ :first-child ul親要素の最初の子要素のスタイルを選択して設定するには、lipseudoクラスを使用できます。たとえば、最初のul li:first-child { color: red; }要素の色を

内に変更する場合は、次のCSSを使用できます。

:only-child擬似クラスの機能は何ですか？

:only-childpseudoクラスは、親要素の唯一の子要素である要素と一致します。これは、兄弟要素がない場合にのみスタイルを要素に適用したい場合に役立ちます。たとえば、特別なスタイルをpの要素にのみdivの要素に追加することをお勧めします。

:emptypseudo-classの使用方法は？

:emptypseudoクラスは、子要素のない要素と一致します。これには、テキストノード、コメント、またはその他の要素が含まれます。たとえば、それを使用して空のdivを非表示にすることができます。そうしないと、はページ上のスペースを占有します：div。 div:empty { display: none; }

構造的な擬似クラスを組み合わせることができますか？

はい、構造的な擬似クラスを組み合わせて、より具体的なセレクターを作成できます。たとえば、親要素の最後の子でもある場合、

と:nth-of-type()を結合して、その親要素内の最後のタイプの:last-child要素を選択できます。 li

すべてのブラウザは構造的な擬似クラスをサポートしていますか？

ほとんどの最新のブラウザは、構造的な擬似クラスをサポートしていますが、古いブラウザーには矛盾があるか、サポートが不足している可能性があります。 CSSで特定の擬似クラスを使用する前に、使用できるようなサイトの現在のサポートレベルを常に確認するのが最善です。

構造的な擬似クラスは擬似要素で使用できますか？

はい、構造的な擬似クラスは、擬似要素と組み合わせて使用​​できます。たとえば、親要素の最初の子の前にコンテンツを追加するために、

pseudo-classを使用して::beforepseudo-elementを使用できます。 :first-child

構造的な擬似クラスを使用して動的なスタイルを作成する方法は？

構造的な擬似クラスを使用して、HTML構造に応答する動的なスタイルを作成できます。たとえば、フォーミュラを備えた

pseudoクラスを使用してゼブラプリントテーブルを作成するか、:nth-child()pseudoクラスを使用してホバーするときにリンクの色を変更できます。可能性は無限であり、あなたの創造性によってのみ制限されています。 :hover

以上が構造的な擬似クラスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。