CSSセレクター

CSSセレクターについて最も重要なことをすべて学ぶ

セレクターを使用すると、1つ以上の宣言をページ上の1つ以上の要素に関連付けることができます。

基本的なセレクター

あるとしましょうpページ上の要素であり、黄色を使用して単語を表示したいと思います。

私たちはできる目標このセレクターを使用するその要素p、を使用してすべての要素をターゲットにしますpページ内のタグ。私たちが望むものを達成するための簡単なCSSルールは次のとおりです。

p {
  color: yellow;
}

すべてのHTMLタグには、対応するセレクターがあります。次に例を示します。div、span、img。

セレクターが複数の要素に一致する場合、ページ内のすべての要素が変更の影響を受けます。

HTML要素には2つの属性があり、CSS内でスタイルをページ上の特定の要素に関連付けるために非常に一般的に使用されます。classそしてid。

これら2つの間に大きな違いが1つあります。HTMLドキュメント内で同じことを繰り返すことができますclass複数の要素にわたる値ですが、使用できるのはid一度。当然の結果として、クラスを使用すると、2つ以上の特定のクラス名を持つ要素を選択できます。これはIDでは不可能です。

クラスは、.シンボル、IDは#シンボル。

クラスの使用例：

<p class="dog-name">
  Roger
</p>

.dog-name {
  color: yellow;
}

IDを使用した例：

<p id="dog-name">
  Roger
</p>

#dog-name {
  color: yellow;
}

セレクターの組み合わせ

これまで、要素、クラス、またはIDをターゲットにする方法を見てきました。より強力なセレクターを紹介しましょう。

クラスまたはIDを持つ要素をターゲットにする

クラスまたはIDが付加されている特定の要素をターゲットにすることができます。

クラスの使用例：

<p class="dog-name">
  Roger
</p>

p.dog-name {
  color: yellow;
}

IDを使用した例：

<p id="dog-name">
  Roger
</p>

p#dog-name {
  color: yellow;
}

クラスまたはIDがすでにその要素をターゲットにする方法を提供しているのに、なぜそれをしたいのですか？あなたはもっと持っているためにそれをしなければならないかもしれません特異性。それが何を意味するのかは後でわかります。

複数のクラスをターゲットにする

を使用して、特定のクラスを持つ要素をターゲットにできます.class-name、前に見たように。スペースなしでドットで区切られたクラス名を組み合わせることにより、2つ（またはそれ以上）のクラスを持つ要素をターゲットにすることができます。

例：

<p class="dog-name roger">
  Roger
</p>

.dog-name.roger {
  color: yellow;
}

クラスとIDの組み合わせ

同様に、クラスとIDを組み合わせることができます。

例：

<p class="dog-name" id="roger">
  Roger
</p>

.dog-name#roger {
  color: yellow;
}

グループ化セレクター

セレクターを組み合わせて、同じ宣言を複数のセレクターに適用できます。これを行うには、コンマで区切ります。

例：

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>

p, .dog-name {
  color: yellow;
}

これらの宣言にスペースを追加して、より明確にすることができます。

p,
.dog-name {
  color: yellow;
}

セレクターでドキュメントツリーをフォローする

タグ名、クラス、またはIDを使用して、ページ内の要素をターゲットにする方法を見てきました。

複数のアイテムを組み合わせてドキュメントツリー構造に従うことで、より具体的なセレクターを作成できます。たとえば、spanタグが内部にネストされているpタグ、スタイルを適用せずにそのタグをターゲットにすることができますspanタグは含まれていませんp鬼ごっこ：

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>

p span {
  color: yellow;
}

2つのトークン間のスペースをどのように使用したかをご覧くださいpそしてspan。

これは、右側の要素が複数レベルの深さであっても機能します。

最初のレベルで依存関係を厳密にするには、>2つのトークン間の記号：

p > span {
  color: yellow;
}

この場合、spanの最初の子供ではありませんp要素、新しい色が適用されることはありません。

直接の子供には、次のスタイルが適用されます。

<p>
  <span>
    This is yellow
  </span>
  <strong>
    <span>
      This is not yellow
    </span>
  </strong>
</p>

隣接する兄弟セレクターでは、特定の要素が前にある場合にのみ要素のスタイルを設定できます。私たちはを使用してそうします+オペレーター：

例：

p + span {
  color: yellow;
}

これにより、前にあるすべてのスパン要素に黄色が割り当てられます。p素子：

<p>This is a paragraph</p>
<span>This is a yellow span</span>

使用できるセレクターは他にもたくさんあります。

属性セレクター
疑似クラスセレクター
疑似要素セレクター

今後の投稿でそれらの詳細。

私の無料ダウンロードCSSハンドブック

CSSセレクター