CSS セレクター

セレクターは、スタイルを定義する HTML 要素を指定するために、HTML 要素の ID、クラス属性、または要素名自体と、いくつかの特殊な記号で構成されます。セレクターは CSS スタイルルールの重要な部分です. セレクターは CSS スタイルと HTML 要素の間の一致パターンと見なすことができます. セレクターに関連付けられたスタイルルールは、セレクターによって指定された HTML 要素に適用されます. CSS にはさまざまなタイプのセレクターが用意されており、好みに応じて選択できます。

このセクションでは、CSS のいくつかの一般的なセレクターの定義方法を紹介します。

コンテンツ 表示

1.ユニバーサルセレクター

アスタリスク*で示されるユニバーサルセレクターは、特定の HTML 要素には一致しませんが、HTML ドキュメント内のすべての要素に一致します。開発では、通常、ユニバーサルセレクターを使用して、次のように HTML 要素のデフォルトの内側と外側のマージンをクリアします。

 
* {
    margin: 0 auto;
    padding: 0;
}

注: ユニバーサルセレクター内のスタイルルールは HTML ドキュメント内のすべての要素に適用できますが、運用環境でユニバーサルセレクターを頻繁に使用することはお勧めしません。ユニバーサルセレクターは Web ページの各要素の特性に一致するため、頻繁に使用するとブラウザーに不必要なプレッシャーがかかります。

2.ラベルセレクター

完全な HTML ドキュメントはさまざまなタグで構成されており、タグセレクターは、以下に示すように、特定のタグ名を使用して、ドキュメント内の同じ名前のすべてのタグに一致させることができます。

 
p {
    color: blue;
}

pセレクターは、ドキュメント内のすべての<p>タグに一致します。

3.IDセレクター

ID セレクターは、HTML ドキュメントで指定された ID 属性を持つタグを照合するために使用されます。ID セレクターの定義では、以下に示すように、 #の後に ID 属性の値を続ける必要があります。

 
#nav {
    color: red;
}

#navセレクターは、ドキュメント内のid="nav"属性を持つタグに一致します。

4.クラスセレクター

クラスセレクターは、タグのクラス属性に従って特定の HTML タグに一致させることができ、すべての適格なタグはセレクターのスタイルに従ってフォーマットされます。クラスセレクターの定義では、以下に示すように、英語のピリオド.の後に class 属性の値を使用する必要があります。

 
.black {
    color: black;
}

.blackセレクターは、ドキュメント内のclass="black"属性を持つすべてのタグに一致します。

class 属性は一意ではなく、さまざまなタグに適用できるため、次のように、クラスセレクターを定義するときに特定のタグを指定することもできます。

 
p.black {
    color: black;
}

p.blackセレクターはclass="black"属性を持つすべての<p>タグにのみスタイルを適用し、 class="black"属性を持つ他のタグには影響しません。

さらに、HTML タグには複数のクラス属性が存在する場合があります。次に例を示します。

 
<p class="info selected"></p>
<p class="info"></p>

class 属性に info が含まれるすべての要素に太字のフォントを設定し、class 属性に selected が含まれるすべての要素に赤いフォントを設定し、class 属性に info と selected の両方が含まれる要素に青い背景を設定する場合は、次のように記述できます。次のように：

 
.info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

このように複数のクラス属性値から構成されるクラスセレクターを「マルチクラスセレクター」、先ほど紹介した単一のクラス属性値で定義されるクラスセレクターを「単一クラスセレクター」と呼べます。

注: マルチクラスセレクターでは、複数のクラス属性が隣り合っており (info.selected など)、スペースで区切る必要はありません。

5.子孫セレクター

<p>タグが<div>タグ内にネストされている場合、 <p>タグは<div>タグの子孫と見なすことができます。ラベルの子孫を選択する必要がある場合は、子孫セレクターを使用できます。子孫セレクターの定義方法は、以下のように、ラベルの入れ子関係に応じて、ラベル名、class属性、id属性などを外側から内側に並べ、スペースで区切って並べます。

 
ul li a {
    text-decoration: none;
}

ul li aセレクターは、順不同リスト<ul>タグのすべての子孫<a>タグのみに一致します。

6.子セレクター

サブセレクターは子孫セレクターに似ていますが、サブセレクターは要素の直接の子孫にのみ一致します (要素とそのサブ要素の間に入れ子のレベルは 1 つだけです)。サブセレクターは 2 つ以上のセレクターで構成されます。、次のように、セレクターは大なり記号>で区切られます。

 
p > strong {
    color:red;
}

p > strongセレクターは、次のコードの最初の<p>タグのサブタグ<strong>にテキストを赤で設定しますが、2 番目の<p>タグの<strong>タグには影響しません。

 
<p>ようこそ<strong>IT基礎.com</strong>へ！</p> <p><em><strong>IT基礎.com（it-kiso.com）</strong></em>は、優れたプログラミングチュートリアルを共有することに特化したオンラインプログラミング学習サイトです。</p>

7.隣接兄弟セレクター

隣接する兄弟セレクターは、要素の直後に別の要素を一致させるために使用されます。2 つの要素は同じ親要素を持ち、ネスト関係はありません。隣接する兄弟セレクターの定義は、プラス記号+を使用する必要があり、2 つの隣接する要素はプラス記号の両側にあります。セレクターは、以下に示すように、プラス記号の後の要素と一致します。

 
h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

h1 + pセレクターは、同じ親要素の下の<p>タグの直後にある<h1>タグに一致します。 ul.task + pセレクターは、同じ親要素の下の<ul> <p>の隣とその後の <p> タグに一致しますが、 <ul> class="task"属性が必要です。

8. 一般的な兄弟セレクター

ジェネリック兄弟セレクターは、隣接兄弟セレクターと非常に似ていますが、それほど厳密ではありません。ユニバーサル兄弟セレクターは、同じ親要素の下にある兄弟要素にも一致しますが、兄弟要素は互いに隣接している必要はありません。 To define a universal sibling selector, you need to use the tilde ~ . チルダの両側は、同じ親要素の下にある 2 つの要素です. 以下に示すように、セレクタはチルダの後の要素に一致します:

 
h1 ∼ p {
    color: blue;
    font-size: 18px;
}

h1 ∼ pセレクターは、同じ親要素の<h1>タグに続くすべての<p>タグに一致します。

9. グループセレクター

セレクターをグループ化すると、同じスタイルルールを複数のセレクターに適用できます。各セレクターはコンマで区切られます,これにより、スタイルルールを繰り返し定義することを回避し、CSS スタイルシートのコードを最小限に抑えることができます。たとえば、CSS スタイルシートでは、次のように、異なるセレクターに同じスタイルルールを含めることができます。

 
h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

セレクターh1 、 h2 、 h3に同じスタイルfont-weight: normal;が含まれていることがわかります。次に、グループ化セレクターを使用して、それらの間で同じスタイルルールをh1 、 h2 、 h3に定義し、個別にスタイルルールを定義できます。次のように、それらの間で異なります。

 
h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

属性セレクターは、特定の属性を持つ要素を一致させるために使用されます。属性セレクターの定義方法は、以下に示すように、ラベルの属性情報を指定するためにラベルの後ろに角括弧[ ]を使用する必要があることを除いて、ラベルセレクターの定義方法と似ています。

 
input[type="text"] {
   color: blue;
}

input[type="text"]セレクターはtype="text"属性を持つすべての<input>タグに一致します。

属性セレクターの角括弧[ ]内の属性情報は、次の書き込み方法にも対応しています。

[target]: target属性を持つすべての要素を選択します。
[target=_blank]: target="_blank"属性を持つすべての要素を選択します。
[title~=flower]: title属性に単語「flower」が含まれるすべての要素を選択します。
[lang|=en]: lang属性が正確に「en」であるか、「en」で始まるすべての要素を選択します。