Zenn
🎨

【CSS】今更だけど、セレクターの書き方についてまとめた

2022/08/25に公開
CSS
初心者
tech

はじめに

この記事は学習ノートです。
CSSのセレクターについて学んだことを、今更だけどまとめました。

そもそも

セレクターの説明

基本のセレクター

全称セレクター

  • *で指定する
  • *で指定した内容は、すべての要素に適用される
css
* {
  color: skyblue;
}

要素型セレクター

  • タグ名で指定する
css
h1 {
  font-weight: normal;
}

属性セレクター

  • [属性名]で指定する
css
[target] {
  font-weight: bold;
}
html
<a href="https://sample.com" target="_blank">これはサンプルです</a>

classセレクター

  • .クラス名で指定する
css
.info {
  color: red;
}
html
<h2 class="info">インフォメーション</h2>

idセレクター

  • #id名で指定する
css
#title {
  color: orange;
}
html
<h3 id="title">タイトル</h3>

【HTML】classとidの違い

①同じ値を設定できる回数が違う

  • class: 1つのHTML文書内で、同じ値を何回でも設定できる
  • id: 1つのHTML文書内で、同じ値を設定できない
OK🙆
<h1 class="title">タイトル1</h1>
<h2 class="title">タイトル2</h2>
NG🙅
<h1 id="title">タイトル1</h1>
<h2 id="title">タイトル2</h2>

②値を設定できる数が違う

  • class: 半角スペース区切りで、複数のクラスを設定できる
  • id: 複数のクラスを設定できない(文法エラー)
OK🙆
<h1 class="title sample">タイトル</h1>
NG🙅
<h1 id="title sample">タイトル</h1>

セレクターの組み合わせ

,(カンマ)で区切る

  • 複数のタグやクラスに対して同じスタイルを適用させたいときに使用する
css
.info, p {
  color: red;
}
/* .infoクラスとpタグに同じスタイルが適用される */
html
<h2 class="info">インフォメーション</h2> 👈 適用される
<p>こんにちは。</p> 👈 適用される

くっつけて書く

  • 両方のセレクターを同時に満たす要素に適用される
css
h2.info {
  color: red;
}
/* h2かつinfoクラスの要素に適用される */
html
<h2 class="info">インフォメーション</h2> 👈 適用される

>(大なり記号)を使う

  • 1つ目に書いた要素の、1つ下の階層にある要素を指定する
css
.sample > p {
  color: red;
}
/* sampleクラスの1つ下の階層にあるpタグすべてに適用される */
html
<div class="sample">
  <p>テスト1</p> 👈 適用される
  <p>テスト2</p> 👈 適用される
  <div>
    <p>テスト3</p> 👈 適用されない
  </div>
</div>

半角空白を使う

  • 1つ目に書いた要素の、下の階層にある要素を指定する
css
.sample p {
  color: red;
}
/* sampleクラスの下の階層にあるpタグすべてに適用される */
html
<div class="sample">
  <p>テスト1</p> 👈 適用される
  <p>テスト2</p> 👈 適用される
  <div>
    <p>テスト3</p> 👈 適用される
  </div>
</div>

+(プラス)記号を使う

  • 同じ階層の、すぐ後の要素にだけ適用される
css
p + p {
  border-top: 1px solid red;
}
html
  <p>テスト1</p> 👈 適用されない
  <p>テスト2</p> 👈 適用される
  <p>テスト3</p> 👈 適用される

参考

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
https://qumeru.com/magazine/1

Discussion