CSSセレクタを使用してユーザーシナリオを維持する方法

名前によるタグの選択

タグによって1つ以上の要素を選択するには、タグ名を直接使用します a、 span、 div、 headerのように。

1つ以上のクラスによる選択

1つ以上のクラスによって要素を選択するには、クラス名の前にピリオド「.」を付けて使用します。

例：

.myClass

要素が持つ必要のある他のクラスを指定することで、選択を絞り込むことができます。常に「.」を前に付けて、前のクラスに付け加えます。

.myClass.secondClass

属性の存在による選択

特定の属性を持つ要素を選択するには、関連する属性を角括弧「[ ]」の間に定義する必要があります。

例：

a[download]

すべてのリンクを選択します download 属性を持つ。

属性の値による選択

特定の属性を持つ要素を選択するには、関連する属性とその値を角括弧「[ ]」の間に定義する必要があります。

例:

[data-analytics="GMT324-3"]

属性の値の一部からの選択

一部のサイトでは、属性の一部が自動的に生成され、リリースごとに変更されることがあります。例えば:

<p id="clientP-4D92J_keyPId"/>

この要素をターゲットにする必要がある場合:

• 値の先頭を使用する場合は、演算子 "^="
  例:

[id^="clientP-"]

• 値の末尾を使用する場合は、演算子 "$="
  例:

  [id$="keyPId"]

• 値に含まれる任意のテキストを使用する場合は、演算子 "*="
  例:

  [id*="ntP-4D92J_k"]

  
  
  

識別子による要素の選択

一意の識別子によって要素を選択するには、識別子の名前の前にハッシュ「#」を付けて使用します。

#myId

識別子は通常一意であるため、このセレクタは1つの要素のみを返すことが期待されます。したがって、複数の識別子を付けるべきではありません。

セレクタの構成

セレクタを洗練させるために、シンプルな選択モードを組み合わせることができます。したがって、タグとその中のクラスの1つによって要素を選択するには、次のように使用できます:

a.myClasse

識別子は最も正確なセレクタであるため、常に宣言の先頭にあり、単独で十分な場合が多いです。

他の要素にある要素の選択

親要素と子要素のセレクタはスペースで区切られています。親要素は直接の親または間接の親であることができます。

div a

すべての <a> 要素は <div> 親要素を持っています。

.parent .child

すべての child クラスを持つ要素は、 parent クラスを持つ要素を親に持っています。

#parent .child

すべての child クラスを持つ要素は、必ず一意の親である parentという識別子を持つ要素に含まれています。

#header div span a

すべてのリンクは、 <span> 親を持ち、その親が <div>親を持ち、 header 識別子を持つ親要素に含まれています。

<div id="header">
    <div>
        <span><strong><a href="#">セレクタによって指定されたリンク</a></strong></span>
    </div>
    <span><a href="#">セレクタによって指定されていないリンク</a></span>
</div>

リマインダー: 子要素は必ずしも親の直接の子ではありません。

高度なCSSセレクタ

#parent > .child

.abel + .cain

a:nth-child(2)

a:not(.excluded)