CSS3のリレーショナルおよび属性セレクター

以下は、Alexis Goldstein、Louis Lazaris、Estelle Weylが共著した本「HTML5＆CSS3 for the Real World、第2版」から抜粋しています。この本は世界中の店舗で入手できます。また、ここで電子書籍バージョンを購入することもできます。

コアポイント

• CSS3セレクターは、Webページ上の要素の正確な位置決めを可能にし、以前のCSSバージョンの機能を拡張します。リレーショナルセレクターと属性セレクターは、CSS3の重要な機能です。
• 関係セレクターは、タグ内の関係に基づいて要素を見つけます。これらには、子孫コンビナー（E F）、サブコンビネーター（E＆GT; F）、隣接する兄弟セレクターまたは次の兄弟セレクター（E F）、および普遍的な兄弟セレクターまたはその後の兄弟セレクター（E〜F）が含まれます。
CSS3の属性セレクターは、要素の属性に基づいて一致することを可能にし、CSS3はパターンマッチングを許可することによりCSS2の属性セレクターを拡張します。これらには、e [attr]、e [attr = val]、e [attr | = val]、e [attr〜 = val]、e [attr^= val]、e [attr $ = val]、およびe [attr * = val]。
すべての最新のブラウザは、IE9以降を含むCSS3セレクターをサポートしています。これらのセレクターを使用すると、Web設計と開発の効率と有効性が大幅に向上する可能性があります。

css3 selector

CSSセレクターはCSSの中核です。ページ上に要素を見つけるセレクターがない場合、要素のCSS属性を変更する唯一の方法は、要素のスタイル属性を使用して、不器用で維持が難しいスタイルのインラインを宣言することです。したがって、セレクターを使用します。最初に、CSSは、タイプ、クラス、および/またはIDごとに一致する要素を許可します。これには、クラスとID属性をタグに追加して、同じタイプのフックと区別要素を作成する必要があります。 CSS2.1は、擬似要素、擬似クラス、および組み合わせを追加します。 CSS3を使用すると、さまざまなセレクターを使用して、ページ上のほぼすべての要素を見つけることができます。

以下の説明では、以前のCSSバージョンに提供されたセレクターを含めます。 CSS3セレクターを使用できる一方で、CSS3よりも早くセレクターもCSSセレクターレベル3仕様の一部であり、CSSセレクターレベル3がそれらを拡張するため、まだサポートされているためです。かなり長い間存在していたセレクターでさえ、古い仕様にはあまり知られていない隠された宝石があるため、ここでレビューする価値があります。 IE9以降を含むすべての最新のブラウザは、すべてのCSS3セレクターをサポートすることに注意してください。

関係セレクター

関係セレクターは、タグ内の関係に基づいて要素を見つけます。これらはすべて、IE7から、および他のすべての主要なブラウザでサポートされています：

子孫コンビネーター（e f）

あなたは間違いなくこれに精通している必要があります。子孫セレクターは、要素Eの子孫である要素F（子要素、孫の要素、great孫要素など）を見つけます。たとえば、Ol Liは、順序付けられたリストにあるLI要素を見つけます。これには、OLのULにネストされたLi要素が含まれますが、これはあなたが望むものではないかもしれません。

subcombinator（e＆gt; f）

このセレクターは、要素eの

要素Eの直接的な子要素として、任意の要素fを一致させます - さらにネストされた要素は無視されます。上記の例を続けると、OL＆GT;

隣人の兄弟セレクターまたは次の兄弟セレクター（e f）

これは、Eと同じ親要素を共有する要素Fと一致し、タグ内の

のすぐ後ろにある任意の要素と一致します。たとえば、Li Liは、最初のLI要素を除き、特定の容器内のすべてのLI要素を見つけます。

普遍的な兄弟セレクターまたはその後の兄弟セレクター（e〜f）

これは少し難しいです。これは、eと同じ親要素を共有し、タグにその背後にある任意の要素Fと一致します。したがって、H1〜H2は、H2がすべて同じ直接の親要素を共有している限り、H2が他の要素にネストされていない限り、H1の後にあるH2と一致します。

簡単な例を見てみましょう：

H1とH2は両方ともヘッダーまたは直接の子孫の子供であるため、

セレクター文字列H1〜H2は最初のH2と一致します。コードスニペットに表示される次のH2は、その親要素がヘッダーではなく記事であるため、一致しません。ただし、ヘッダー〜H2と一致します。同様に、H2〜Pは最後の段落とのみ一致します。最初の段落はH2の前であるため、親要素の記事と共有します。

<header>
  <h1 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

注：なぜ「親」セレクターがいないのですか？

これまでのところ、「父」または「祖先」セレクターも「兄弟兄弟」セレクターもいないことに気付くでしょう。ブラウザのパフォーマンスは、スタイルを適用するかどうかを決定する前に、ネストされた要素セットにDOMツリーを後方に移動するか、再帰的にしなければなりません。

jQueryには、祖先セレクターとして（）が含まれます。このセレクターはCSSセレクターレベル4で検討されていますが、ブラウザには実装されていません。実装された場合、e：has（f）を使用してfを子孫として見つけます。 ）兄弟Fの直前にEを見つける。

HTML5ヘラルドのスタイルシートを閲覧すると、これらのセレクターを多くの場所で使用していることがわかります。たとえば、サイトの全体的なレイアウトを決定するとき、3つの列のdivを左に浮かせたいと思います。このスタイルをその内部にネストされた他のdivに適用することを避けるために、サブセレクターを使用します。

次のいくつかの章でサイトに新しいスタイルを追加すると、これらのセレクタータイプの多くが表示されます。

main > div {
  float: left;
  overflow: hidden;
}

属性セレクター

CSS2はいくつかのプロパティセレクターを導入します。これらは、要素の属性に基づいて一致することを可能にします。 CSS3はこれらのプロパティセレクターを拡張して、パターンマッチングに基づいて何らかの位置を確保します。 CSSセレクターレベル4がさらに追加されました：

e [attr]属性の値に関係なく、任意の要素Eと属性属性を一致させます。第4章では、必要な入力をスタイリングしました。

e [attr = val]は、任意の要素eと属性属性と一致し、その値はvalです。新しいものではありませんが、たとえばフォーム入力タイプを見つけると便利です。[タイプ=チェックボックス]を使用してチェックボックスを見つけます。

e [attr | = val]属性属性がVALの値を持っているか、Val-で始まる要素と一致します。これは、Lang属性で最も一般的に使用されています。たとえば、p [lang | = "en"]は、英国英語であろうとアメリカ英語であろうと、

または

を使用して、英語で定義された段落と一致します。

e [attr〜 = val]は、属性属性が完全な単語val（スペースで囲まれている）を含む要素と一致します。たとえば、.info [title〜= more]は任意の要素をクラス情報と一致させ、タイトル属性には「詳細をクリックする」などの「more」という単語が含まれます。

e [attr^= val]属性属性が値valで始まる要素と一致します。つまり、Valはプロパティ値の開始と一致します。

e [attr $ = val]属性属性がで終了する要素と一致します。言い換えれば、VALはプロパティ値の終わりと一致します。

e [attr= val]は、属性属性が任意の位置でVALと一致する要素と一致します。それはe [attr〜 = val]に似ていますが、valが単語の一部になる可能性があることを除いて。以前と同じ例を使用して、.fakelink [title = info] {}は任意の要素をクラスFakelinkと一致させ、タイトル属性には「詳細を参照するにはここをクリック」などの文字列情報が含まれます。

これらのプロパティセレクターでは、VALの値は、HTMLのケースに敏感な値に対して症例に敏感です。たとえば、input [class^= "btn"]は、クラス名がケースに敏感であるため、ケースに敏感ですが、入力[type = "checkbox"]は、型値がHTMLでケースインス感受性であるため、ケースに敏感です。

値が英数字である場合、値は必要ありませんが、いくつかの例外があります。空の文字列、数字から始まる弦、2つのハイフン、その他の特別なケースを引用符で囲む必要があります。例外があるため、引用が必要な状況の引用を常に含める習慣を身に付けることをお勧めします。

CSSセレクターレベル4では、エンドブラケットの前にiを含めることにより、ケース感動性を達成できます。

CSS3のリレーショナルセレクターと属性セレクターに関するFAQ

CSS3の関係セレクターとプロパティセレクターの違いは何ですか？

CSS3の関係セレクターは、HTMLドキュメントの他の要素との関係に基づいて要素を選択するために使用されます。たとえば、子どもの要素、子孫、近隣の兄弟、普遍的な兄弟セレクターは、すべてのタイプのリレーショナルセレクターです。一方、属性セレクターは、その属性または属性値に基づいて要素を選択するために使用されます。たとえば、プロパティセレクターを使用して、「テキスト」の型属性を持つすべての入力要素を選択できます。

CSS3でサブコンビネーターを使用する方法は？

CSS3のサブコンビネーターは、「＆gt;」で表されます。特定の要素の直接の子要素を選択するために使用されます。たとえば、クラス「親」を持つ親要素のすべての直接子のdiv要素を選択する場合は、次のCSSを書く必要があります。

.parent > div { /* CSS 属性在此处 */ }

CSS3で複数のプロパティセレクターを使用できますか？

はい、CSS3で複数のプロパティセレクターを使用できます。これにより、複数の属性条件を満たす要素を選択できます。たとえば、タイプ属性「テキスト」と名前属性「ユーザー名」を持つすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

CSS3の隣接する兄弟コンビネーターの目的は何ですか？

CSS3の隣接する兄弟コンバイナーは、「」シンボルで表されます。これは、別の特定の要素のすぐ後ろにある要素を選択するために使用され、2つの要素は同じ親要素を共有します。たとえば、P要素のすぐ後ろにあるDIV要素を選択する場合は、次のCSSを書く必要があります。

p div { /* CSS 属性在此处 */ }CSS3に特定の属性値を持つ要素を選択する方法は？

CSS3に特定の属性値を持つ要素を選択するには、属性セレクター、属性名、および平方ブラケットで値を使用します。たとえば、タイプ属性「テキスト」を持つすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

CSS3の関係セレクターと属性セレクターを組み合わせることはできますか？ input[type="text"] { /* CSS 属性在此处 */ }

はい、CSS3の関係セレクターと属性セレクターを組み合わせることができます。これにより、他の要素やプロパティとの関係に基づいて要素を選択できます。たとえば、入力要素の型属性が「テキスト」である「フォーム」を持つフォーム要素のすべての直接の子入力要素を選択する場合は、次のCSSを記述する必要があります。

CSS3のユニバーサルブラザーコンビネーターは何ですか？

form.form > input[type="text"] { /* CSS 属性在此处 */ }

CSS3のユニバーサル兄弟コンバイナーは、「〜」シンボルで表されます。 HTMLドキュメントでの注文に関係なく、特定の要素の兄弟要素を選択するために使用されます。たとえば、P要素のすべての兄弟div要素を選択する場合は、次のCSSを書く必要があります。

特定の属性を持たないCSS3で要素を選択する方法は？

p ~ div { /* CSS 属性在此处 */ } CSS3に特定の属性を持たない要素を選択するには、属性セレクターを使用して：not（）pseudo-classを使用します。たとえば、タイプ属性が「送信」されていないすべての入力要素を選択する場合は、次のCSSを記述する必要があります。

擬似クラスでCSS3の関係セレクターを使用できますか？

はい、擬似クラスを使用してCSS3の関係セレクターを使用できます。これにより、他の要素や状態との関係に基づいて要素を選択できます。たとえば、すべての直接子を選択する場合は、ホバリングされているナビゲーション要素の要素を選択する場合は、次のCSSを書く必要があります。

nav > a:hover { /* CSS 属性在此处 */ }

特定の値を持つ特定の属性を含むCSS3の要素を選択する方法は？

CSS3に特定の値を持つ特定の属性を含む要素を選択するには、正方形のブラケットプロパティセレクター、属性名と値、および *=演算子を使用します。たとえば、「例」を含むHREF属性を持つすべてのA要素を選択する場合は、次のCSSを記述する必要があります。

以上がCSS3のリレーショナルおよび属性セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。