ブログ タイトル 背景画像

制作

ブログ 画像

制作2020.12.22

CSSセレクタの指定方法

こんにちは、クリエイティブ制作部の宮嶋です。

今回は、CSSセレクタの指定方法に関しての記事を書かせていただきます。
普段からコーディング業務に携わっている人でもセレクタの指定方法を意外と知らない人も多いのかなと思います。なので今回は自分の復習の意味も込めて、よく使う物をメインにまとめていこうと思います。

CSSセレクタとは

まずCSSは「セレクタ」「プロパティ」「値」の3つで構成されます。

上記の例ですと、「h2の文字色を#0075c1にする」という指定になります。

CSSセレクタは、CSSによる指定をどのHTML要素に適用させるかを指定するため重要な役割となってきます。普段何気なく使っているclassやidなどもセレクタの1つで、CSSセレクタの指定方法次第で効率的かつ分かりやすいコードを書くことができます。

CSSセレクタの指定方法

すべての要素

* (アスタリスク)はすべての要素にスタイルを適用したい時に使用します。
普段はあまり使用しませんが、全ページ共通のcssやある要素内全体にスタイルを指定したい際などに使用することが多いですね。

以下のように指定するとページ内すべての要素にスタイルが適用できます。


							* {
							color: #0075c1;
							}
						

また、以下のように指定すると「divの中にあるすべての要素」にスタイルが適用できます。


							div * {
							color: #0075c1;
							}
						

HTML要素

HTMLの要素名をセレクタとして直接指定します。
h2やタイトルなどは全て同じスタイルだったりする場合も多いと思いますが、pなどにこの方法でスタイル指定してしまうと他のスタイルと重なって打消しあってしまったりする可能性もあるのでお勧めできない場合もあります。
そういう場合は次に紹介するclassやidでの指定方法がいいでしょう。

以下のように指定するとページ内すべてのpにスタイルが適用されます。


							p {
							color: #0075c1;
							}
						

class

指定したクラス名の要素に適用したい時に使用します。
「.(ドット)クラス名」と記述することで、指定の要素にスタイルが適用されます。

classでの指定は多分一番使う方法かなと思います。むやみやたらにclassをつけるとごちゃごちゃしたコードになってしまいますが、ルール付けをして効率的に使用できると良いと思います。

以下のように指定すると「sample」というclassがついた要素にスタイルが適用されます。


							.sample {
							color: #0075c1;
							}
						

また、以下のように指定すると「sample」というclassのついた「p」のみに適用されます。


							p.sample {
							color: #0075c1;
							}
						

id

class同様、指定したid名の要素に適用したい時に使用します。
「#(シャープ)id名」と記述することで、指定のクラスにスタイルが適用されます。

以下のように指定すると「sample」というidがついた要素にスタイルが適用されます。


							#sample {
							color: #0075c1;
							}
						

また、こちらもclass同様、以下のように指定すると「sample」というidのついた「p」のみに適用されます。


							p#sample {
							color: #0075c1;
							}
						

子孫セレクタ

一旦要素に関して簡単に説明すると、ある要素(親要素)内にある要素が子要素と呼ばれます。その子要素内にまた要素があれば孫要素。

セレクタの話に戻すと、半角スペースを挟んでセレクタを指定することで、指定の親要素内の要素にスタイルが適用されます。


							p span {
							color: #0075c1;
							}
						

複数の要素

「,(カンマ)」で区切ってセレクタを指定することで、複数の要素に同じスタイルが適用されます。
ボタンだったり複数箇所で同じスタイルを適用させたい時に使用することが多いですね。


							.sample,
							.sample p {
							color: #0075c1;
							}
						

子要素のみ

「>」を挟んでセレクタを指定することで、指定の親要素の直下の子要素のみにスタイルが適用されます。

以下のように指定するとdiv直下のpのみにスタイルが適用されます。


							div > p {
							color: #0075c1;
							}
						

隣接している要素

「+」を挟んでセレクタを指定することで、隣接している要素にスタイルが適用されます。

以下のように指定するとh2と隣接しているpのみにスタイルが適用されます。


							h2 + p {
							color: #0075c1;
							}
						

後ろにある同じ階層の要素

「~」を挟んでセレクタを指定することで、指定した要素の後にある同じ階層の要素にスタイルが適用されます。


							h2 ~ p {
							color: #0075c1;
							}
						

first-child

最初の要素のみにスタイルを適用させたい時に使用します。
リスト表示などの時に使用されることが多いですね。


							li:first-child {
							color: #0075c1;
							}
						

last-child

first-childの反対、最後の要素のみにスタイルを適用させたい時に使用します。


							li:last-child {
							color: #0075c1;
							}
						

nth-of-type(n)

同じ型をもつ要素のうち特定の要素のみにスタイルを指定したいときに使用します。

以下のように指定すると2番目のliのみにスタイルが適用されます。


							li:nth-of-type(2) {
							color: #0075c1;
							}
						

またnの値については数字以外にも以下の指定方法があります。

odd、2n+1 奇数番目の要素に適用
even、2n 偶数番目の要素に適用
3n 3,6,9,12...番目の要素に適用
3n+1 1,4,7,10...番目の要素に適用

まとめ

普段使用する機会の多い方法をメインにまとめました。
自分だけでなく他の方が同じデータを触ることなどを考えると、こういったものを活用して綺麗に整ったコードを書くことは大事になってくるかなと思います。
こういう時使えるのあったな、何だっけなという時にぜひ活用していただけたら嬉しいです。

他に紹介しきれていないものもありますが、それはまた機会があれば掘り下げてお話しできればと思います。
最後までお読みいただきありがとうございました。次回もよろしくお願いいたします。