最初に覚えておきたい!CSSセレクタの基礎

CSSを書く時に絶対に必要になるCSSセレクタ。
「見出しの次のテキスト」「コンテンツの直下にあるコンテンツのみ」など様々な書き方ができるため、使い方をマスターすると効率的で綺麗なCSSを書くことができます!
今回はそんなCSSセレクタとは何か?という基礎の部分と、まず最初に覚えておきたい基本のセレクタの使い方について解説いたします。

そもそもCSSのセレクタとは?

そもそもCSSのセレクタが何かというと、「body」というHTMLタグや「#text」というidなど、どこにCSSを当てたいかを記述する部分のことを指しています。
それ以外の「font-size」のような当てたいCSSのスタイルを書く部分をプロパティ、「16px」のようなスタイルの詳細を書く部分をと呼ばれています。

基本のCSSセレクタの使い方

CSSセレクタが何かがわかったところで、実際の使い方をご紹介いたします。
まずご紹介するのは、基本的な使い方についてです。

p{〜} (タグ名)

pタグのようなタグ名で記述をすると、全てのpタグに対してスタイルをあてることができます。
コンテンツ内の特定のタグに同じスタイルを当てたい場合などに便利です。

p{
   color:#ffffff;
}

#id{〜}(id名)/ .class{〜}(class名)

id名やclass名で記述をすると、指定されたid/classにスタイルをあてることができます。
idの場合はid名の前に「#」、classの場合はclass名の前に「.」を付けて指定します。

/* id名を指定する場合 */
#header{
   font-size:18px;
}
/* class名を指定する場合 */
.content{
   font-size:16px;
}

.xxx , .yyy{〜}(複数セレクタに適用)

複数のタグやclass名などに同じスタイルをまとめて指定したい場合は、セレクタ同士を「,」で区切って書きます。
1行で書く場合も、カンマのあとで改行する場合も実際に当たるスタイルは同じため、自分の見やすい書き方で書いて大丈夫です!

#header , .content , p{
   padding-top:10px;
}
/* カンマのあとで改行 */
#header ,
.content ,
p{
   padding-top:10px;
}

.xxx span{〜}(子孫要素に適用)

セレクタ同士を半角スペースで区切ることで、要素の下にある要素にスタイルをあてることができます。
例えば下記例のように指定をすると、pタグの中にあるspanタグには反映されますが、divタグの中にあるspanタグには反映されません。
このように特定のセレクタの中だけに反映させたい場合によく使用されています。

<!-- HTML -->

<p><span>この中はCSSがあたります。</span></p>
<div><span>この中はCSSがあたりません。</span></div>
/* CSS */

p span{
   font-size:10px;
}

覚えておくと便利なCSSセレクタの使い方

*{〜}(すべての要素に適用)

「*」を使用するとすべての要素にスタイルをあてることができます。このセレクタのことをユニバーサルセレクタと呼びます。
CSSの書き出しに「*」でフォントサイズや文字色のデフォルト設定を一括指定することや、下記の書き方をすることでdivの中のすべての要素に対して書くことができるため、まとめて指定したい場合に便利です。

<!-- HTML -->

<div>
   <p>テキスト</p>
   <p>テキスト<span>テキスト</span></p>
</div>
/* CSS */

*{
   font-size:14px;
   color:#333;
}
/* divの中のすべての要素に適用 */
div *{
   margin:10px;
}

.x > .y(xの直下にあるyに適用)

「>」を使用するとxの直下にあるyにスタイルをあてることができます。
下記のように同じclass名であってもさらに下層にある要素には適用されません。

<!-- HTML -->

<div class="text_box">
	<!-- ここにあるtext_innerにはdisplay:flexがあたります-->
	<div class="text_inner">
		<!-- ここにあるtext_innerにはdisplay:flexがあたりません-->
		<div class="text_inner">
		   <p class="text">テキスト</p>
		</div>
	</div>
</div>
/* CSS */

.text_box > .text_inner{
   display:flex;
}

.x + .y(xの次にあるyに適用)

「+」を使用するとxの次にあるy(隣接するセレクタ)にスタイルをあてることができます。
class名を使いまわしている時に特定の要素の次に来る場合は見た目を変えたい、pが複数続く部分で上の空きを調整したい場合などに大変便利です。

<!-- HTML -->

<p>テキスト</p>
<p>テキスト</p>
/* CSS */

p + p{
   margin-top:10px;
}

今回は基本的なCSSセレクタの使い方について解説してみました。
この基本的な書き方を応用していくと、n番目の要素や奇数、偶数だけなどより細かく指定を書くことができます!
その応用した書き方については別の記事でまとめているので、ぜひそちらも参考にしてみてください!

CSSセレクタについての記事はこちら

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×