CSS

2020.12.26

【CSS】知っていると便利なCSSセレクタまとめ

コーディングをしている時に「見出しの次のテキスト」「コンテンツの直下にあるコンテンツのみ」など特定の要素だけ見た目を変えたくなることがあると思います。
今回はそんな時に役立つCSSのセレクタの基本的な使い方についてご紹介したいと思います!

CSSのセレクタとは?

まずCSSのセレクタとは何かというと、下記のように「body」というHTMLや「#text」というidなど、どこにCSSを当てたいかを記述する部分のことを指しています。

基本のセレクタの指定

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名などに同じスタイルをまとめてあてたい時、セレクタを「,」で区切ることで複数指定することができます。
カンマのあとで改行をしても同じように複数指定することが可能です。

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

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

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

<!-- HTML -->

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

.text span{
   font-size:10px;
}

覚えておくと便利なセレクタの指定

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

「*」を使用するとすべての要素にスタイルをあてることができます。
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;
}

今回は基本的なセレクタについてをご紹介させていただきました。
他にも便利なセレクタの指定方法はたくさんありますので、それは別の回でご紹介したいと思います!

0

関連記事

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!