【初心者向け】覚えておくべきCSSセレクタ5つ！（中級編）

前回はセレクタの種類の中から、初心編として5つのセレクタをご紹介しました。

2020.07.16【初心者向け】覚えておくべきCSSセレクタ5つ！（初級編）

前回より少し複雑な内容となりますが、より高度な要素指定ができるようになるために、

さらに

・セレクタの種類5つ（中級編）

・複数セレクタで指定する方法

をご紹介いたします。

セレクタの種類（中級編）

初級編でご紹介したよりもさらに限定的な指定の方法についてご紹介します。

擬似要素セレクタ

擬似要素セレクタとは、要素や属性だけでは特定できない「要素のある部分だけ」を対象としてスタイルを適用させるセレクタです。

CSS3から、擬似クラスと判別しやすくするために擬似要素セレクタは「要素名::○○」という書き方となっています。

※2020年6月時点では、どちらの書き方でも適用されます。

・要素名:first-line（::first-line）

要素の最初の一行に装飾を反映します。

// pタグ要素の中の「最初の1行」だけ 文字色を 青く します
p::first-line {
    color : blue;
}

// pタグ要素の中の「最初の1行」だけ文字色を青くします

p::first-line {

color : blue;

}

・要素名:first-letter（::first-letter）

要素の最初の一文字に装飾を反映します。

// pタグ要素の中の「最初の１文字」だけ 文字サイズを 30px にします
p::first-letter {
    font-size : 30px;
}

// pタグ要素の中の「最初の１文字」だけ文字サイズを 30px にします

p::first-letter {

font-size : 30px;

}

・要素名:before（::before）

要素の直前に装飾を反映します。

// aタグ要素の文字表示の前に 『を つける
a::before {
 　　content :"『";
}

// aタグ要素の文字表示の前に『をつける

a::before {

　　content :"『";

}

・要素名:after（::after）

要素の直後に装飾を反映します。

// aタグ要素の文字表示の後ろに →を つける
a::after {
    content :"→";
}

// aタグ要素の文字表示の後ろに →をつける

a::after {

content :"→";

}

属性セレクタ

属性セレクタとは、「指定された属性が存在するかどうかや、その値に基づいて要素を選択できるセレクタ」です。

・要素名[属性名]

特定の属性を持つ指定要素に装飾を反映します。

// title属性を持つaタグ要素の 文字色を 紫に する
a[title] {
    color : purple;
}

// title属性を持つaタグ要素の文字色を紫にする

a[title] {

color : purple;

}

・要素名[属性名= “属性値”]

指定した属性値と一致する指定要素に装飾を反映します。

// href属性の値が 「https://sample.com」 と一致する aタグ要素の 文字色を 青に する
a[href="https://sample.com"] {
    color : blue;
}

// href属性の値が「https://sample.com」と一致する aタグ要素の文字色を青にする

a[href="https://sample.com"] {

color : blue;

}

・要素名[属性名*= “属性値”]

指定した属性値を含む指定要素に装飾を反映します。

// href属性の値に 「sample」を　含む aタグ要素の 文字色を 赤に する 
a[href*="sample"] { 
     color : red; 
}

// href属性の値に「sample」を　含む aタグ要素の文字色を赤にする

a[href*="sample"] {

color : red;

}

・要素名[属性名$= “属性値”]

指定した値候補で終わる指定要素に装飾を反映します。

// href属性の値が 「.com」で終わる aタグ要素の 文字色を 緑に する 
a[href$=".com"] { 
     color : green; 
}

// href属性の値が「.com」で終わる aタグ要素の文字色を緑にする

a[href$=".com"] {

color : green;

}

・要素名[属性名^= “属性値”]

指定した値候補で始まる指定要素に装飾を反映します。

// href属性の値が「https://」で始まる aタグ要素の 文字色を グレー にする

a[href^="https://"] {
    color : gray;
}

// href属性の値が「https://」で始まる aタグ要素の文字色をグレーにする

a[href^="https://"] {

color : gray;

}

子孫セレクタ

「下の階層の子孫要素セレクタ」です。

セレクタA　セレクタB { プロパティ：値 }

という書き方をすることで、

「セレクタA の中にあるセレクタB全て」に対して装飾する

となります。

// p要素タグの中の strong要素タグ 全ての 文字色を 赤に する
p strong {
    color : red;
}

// p要素タグ直下のstrongタグ要素（子要素）だけでなく、
// p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）にも適用されます

// p要素タグの中の strong要素タグ全ての文字色を赤にする

p strong {

color : red;

}

// p要素タグ直下のstrongタグ要素（子要素）だけでなく、

// p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）にも適用されます

子セレクタ

「直下の階層の子要素セレクタ」です。

セレクタA > セレクタB { プロパティ：値 }

という書き方をすることで、

「セレクタA の直下にあるセレクタB全て」に対して装飾する

となります。

// p要素タグ直下の strong要素タグ 全ての 文字色を 緑に する
p > strong {
    color : green;
}

// p要素タグ直下のstrongタグ要素（子要素）だけ
// p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）には適用されない

// p要素タグ直下の strong要素タグ全ての文字色を緑にする

p > strong {

color : green;

}

// p要素タグ直下のstrongタグ要素（子要素）だけ

// p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）には適用されない

隣接セレクタ

「直後に隣接している要素セレクタ」です。

セレクタA + セレクタB { プロパティ：値 }

という書き方をすることで、

「セレクタA の直後に隣接しているセレクタB」に対して装飾する

となります。

// h2要素タグの 直後に隣接している pタグ要素の 文字色を 青 にする
h2 + p {
    color : blue;
}

// h2タグ要素の直後にあったとしても、タグ要素がpでなければ適用されません

// h2要素タグの直後に隣接している pタグ要素の文字色を青にする

h2 + p {

color : blue;

}

// h2タグ要素の直後にあったとしても、タグ要素がpでなければ適用されません

複数セレクタで指定する方法

区切り文字がカンマ（,）

セレクタを複数指定することができます。

// h2要素タグとpタグ要素の 文字色を 赤 にする
h2,p {
    color : red;
}

// classセレクタやidセレクタも使えます。
//class名「sample」を持つ要素 と id名「demo」を持つ要素の 文字色を 青 にする
.sample,#demo {
     color : blue;
}

// h2要素タグとpタグ要素の文字色を赤にする

h2,p {

color : red;

}

// classセレクタやidセレクタも使えます。

//class名「sample」を持つ要素と id名「demo」を持つ要素の文字色を青にする

.sample,#demo {

color : blue;

}

区切り文字がない場合

複数の条件を満たしている要素にのみ適用するセレクタです。

//class名に 「sample」 と 「demo」 の両方を持つ要素の 文字色を 緑 にする
.sample.demo {
     color : green; 
}

//class名に「sample」と「demo」の両方を持つ要素の文字色を緑にする

.sample.demo {

color : green;

}

【注意】「子孫セレクタ」と混同してしまいがちですので、ご注意ください。

まとめ

いかがでしたでしょうか？

初級編とあわせて、こちらでご紹介したセレクタを使いこなすことで、かなり複雑な要素指定ができるようになります。

2020.07.16【初心者向け】覚えておくべきCSSセレクタ5つ！（初級編）

以上、CSSのセレクタについて

・セレクタの種類5つ（中級編）

・複数セレクタで指定する方法

についてご紹介しました。

プログラミング学習を始めたばかりの方は、CSS理解のためにぜひ参考にしてみてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。