こんにちは、Mochiです。
CSSのセレクターって何？セレクターってどうやって書けばいいんだっけ？🤔
そんな方に向けて、セレクターとは何か、基本的なセレクターの種類と書き方をわかりやすく解説します。学んでいきましょう！
🤔セレクターとは
CSSは次のような書き方・文法です。
selector {
property1: value1;
property2: value2;
}今回はこの中のセレクターに着目します。他のプロパティや値についても理解したい方は記事「CSSとは何か？その基本と書き方を初心者にもわかりやすく解説」を読むのがおすすめです。
セレクターには装飾する部分を指定します。例えば、見出し1を装飾したい場合にはHTMLタグの”h1”を指定し、段落を装飾したい場合にはHTMLタグの”p”を指定します。
つまり、何に対して装飾をするのかを選択（セレクト）します。そんなセレクターの種類はどのようなものがあるのか見ていきましょう！
✍️基本的なセレクターの種類と書き方
要素型セレクター
要素型セレクターとは、指定したHTMLタグの要素を装飾するセレクターです。最も基本的なセレクターです。
書き方は
tag {property: value;}のようになります。
例えば段落のタグを指定して、文字サイズを”large”サイズにしたい場合は
p {font-size: large;}のように書きます。
セレクターリスト
セレクターリストとは、複数のセレクターを選択する書き方です。同じ装飾を複数箇所で行いたい時に役立ちます。
書き方は
selector1, selector2 {property: value;}のように「,」でリストのように繋ぐ形式になります。
特徴は
- 3つ以上のセレクターも指定できます
- この後紹介するidセレクターやクラスセレクタも指定できます
例えば見出し1と見出し2のタグを同時に選択して、フォントをゴシック体に変える場合は
h1, h2 {font-family: sans-serif;}のように書きます。
子孫セレクター
子孫セレクターとは、ある親要素の中の子要素を選択するセレクターです。特定の要素の中だけ装飾したい場合に役立ちます。
書き方は
tag1 tag2 {property: value;}のように空白” “でタグを区切ります。
特徴は
- 3つ以上のタグも指定できます
例えばbodyタグの中のulタグの中のliタグを太字にしたい場合は
body ul li {font-weight: bold;}のように書きます。
idセレクター
idセレクターとは、HTMLでidを指定した要素を修飾するセレクターです。直接的に要素を指定したい場合に便利です。
まずHTMLでidを指定します。
<tag id="id-name">次にCSSでのidの書き方は
#id-name {property: value;}のように#の後にHTMLで指定したidの名前を入れる形式になります。
特徴は
- 同じidはページで1つの要素にしか使えないです（＝複数の要素に同じidは指定できないです）
- 同じページ内で押すとidの先へジャンプできるような、ページ内リンクを作成できます
- この後紹介するクラスの同時指定もできます
例えばある見出し1にidを指定して中央揃えに変更、また段落内にページ内リンクを作成した場合
<h1 id="top">Mochi Blog</h1>
<p>先頭に戻りたい方は<a href="#top">こちら</a>をクリック</p>
#top {text-align: center;}のように書きます。
ただし、特徴であげた複数の要素に同じidを使えない点は不便な場合があります。例えば同じ装飾を別の要素にもしたい場合、idを使った方法ではできません。そこで次に紹介するセレクターが役立ちます。
クラスセレクター
クラスセレクターは、HTMLでクラスを指定した要素を修飾するセレクターです。複数の要素に同じクラスを指定することができます。そのため、idセレクターよりもクラスセレクターを使うのがおすすめです。
まずHTMLでクラスを指定します
<tag class="class-name">次にCSSでのクラスセレクターの書き方は
.class-name {property: value;}のようにドット”.”の後にHTMLで指定したクラスの名前を入れる形式になります。
特徴は
- 複数の要素に同じクラスを指定できます
- idの同時指定もできます
- 空白で区切ることで、1つの要素に複数のクラスを指定できます
<tag class="class1 class2">- タグを同時指定することができます。クラスがついている要素の中でも、指定したタグのみ修飾されます
tag.class-name {property: value;}例えば、2つの段落の要素にクラスを指定して太字にした場合
<p class="around">Mochi Blogで発信している内容には</p>
<p class="around">があります。</p>
.around {font-weight: bolder;}のように書きます。
擬似クラス
擬似クラスとは、特定の状況にある要素を対象として指定するセレクターです。特定の状況にある要素とは、リストの中でも先頭のリスト要素や最後のリスト要素などを表します。たくさんの種類の擬似クラスが存在しています。
書き方は
selector:pseudo-class {property: value;}のようにセレクターをセミコロン”:”で区切った後に、擬似クラス(pseudo-class)を書きます。
順番に関係した擬似クラスを3つほど紹介します。
first-childe: 1番最初の要素
first-childe擬似クラスは親要素から見た1番最初の要素を指定します。
nth-child: n番目の要素
nth-child擬似クラスは親要素から見た、指定した順番(n)の要素を指定します。
書き方は
selector:pseudo-class(arg) {property: value;}のようになり、引数（arg）の部分には
- 数値：順番
- キーワード
- odd: 親要素から見た奇数の要素
- even: 親要素から見た偶数の要素
を指定します。
last-child: 1番最後の要素
last-child擬似クラスは親要素から見た1番最後の要素を指定します。
例えば、リストの中の1番目の要素だけ文字のサイズを大きくする場合
li:first-child {font-size: 150%;}のように書きます。
ユニバーサルセレクタ
ユニバーサルセレクタとは、すべての要素を指すセレクターです。すべての文字のフォントを統一するなど、ページ全体の基本的な設定を行う際に役立ちます。
ユニバーサルセレクタの書き方は
* {property: value;}のように先頭に*を指定する形式になります。
🎉まとめ
セレクターとは、何に対して装飾をするのかを選択（セレクト）するためのものです。そのセレクターの種類と書き方を複数まとめました。
皆さんはセレクターを使って自分が装飾したい要素を選択し、装飾できるようにスキルアップしました。素晴らしいです👏
セレクターは装飾する場所を選ぶ上で避けては通れません。何度もこの記事などを読み返して、使い方を深く理解していきましょう。
