【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説

これからCSSを勉強してみたいと考えている方向けに、噛み砕いて基礎から解説しています。どんな感じなのかなぁ～、くらいの興味でオッケーです。

今回はCSSの基本的なセレクターについて書いています。セレクターを上手く使えると、効率的にCSSを書けるようになります。

小難しい事はあえて書いてません。

「もう知ってるよー」って所は読み飛ばしても大丈夫です。

CSSセレククターとは（CSSの基礎・HTMLの予備知識）

CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。

HTMLとCSSはそれぞれ役割が違うんだね。

予備知識：HTMLの構造

「もう知ってるよー」って方は、「基本的なセレクターの種類」の項目へどうぞ。

CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。

CSSを適用する事を、「CSSを掛ける」「CSSが効く」と言ったりします。

基本的なセレクターの種類

どのセレクターを使うかによって、様々な指定方法があります。選び方や書き方で簡潔にも冗長にもなります。

表示結果は、分かり易いようにタグを付けて表示しているよ。

上手くCSSが掛からないときは、「詳細度」も確認してみてくださいね。

関連記事CSSの優先順位？詳細度が原因かも 適用ルール解説

2023.09.15

1．*（全称セレクター：すべての要素を指定）

「*（アスタリスク）」と記述することで、すべての要素に装飾が適用されます。影響範囲が広いので不要な所にも影響しない様に注意。

■ HTML
<p>ブログ始めました</p>
<span>fueru.infoです</span>
■ CSS
* {
  color: #ff3c07;
}

2．タグ（要素型セレクター：タグ名で指定）

タグ名そのものをセレクターとして使う事が出来ます。

■ HTML
<p>ブログ始めました</p>
<span>ここは変わりません</span>
■ CSS
p {
  color: #ff3c07;
}

3．.class（クラスセレクター：クラス名で指定）

「.（ドット）クラス名」と記述することで、同じクラス名が指定されている要素すべてに装飾が適用されます。半角スペースで区切ると複数指定出来ます。

■ HTML
<p>ブログ始めました</p>
<p class="sample">ここが変わります</p>
<h1 class="sample">同じくここも変わります</h1>
■ CSS
.sample {
  color: #ff3c07;
}

4．#id（idセレクター：id名で指定）

「#（ハッシュ）id名」と記述することで、指定のidに装飾が適用されます。SNSでも見かけますね。

■ HTML
<p>ブログ始めました</p>
<p class="sample">ここは変わります</p>
<h1 id="sample">同じく変わります</h1>
■ CSS
#sample {
  color: #ff3c07;
}

5．A B（子孫セレクター：親子関係で指定）

セレクターとセレクターの間に半角スペースを入れて指定することで、親要素から子要素へという様に階層をたどって適用されます。

■ HTML
<span>ブログ始めました</span>
<p>これが親で<span>これは子</span>です</p>
<span>ブログ始めました</span>
■ CSS
p span {
  color: #ff3c07;
}

6．A > B（子セレクター：階層直下を指定）

セレクターの次に「>」を入れセレクターを指定することで、指定の親要素内の1階層下（直下）の子要素に装飾が適用されます。それ以下の階層はたどりません。

■ HTML
<div>
  <span>div直下のspanなので変わります</span>
  <p><span>div直下ではないので変わりません</span></p>
</div>
<span>ここは変わりません</span>
■ CSS
div > span {
  color: #ff3c07;
}

7．A + B（隣接兄弟セレクター：隣接直後を指定）

セレクターの次に「+」を入れセレクターを指定することで、指定の要素に隣接した直後の要素に装飾が適用されます。

■ HTML
<div>divの内容</div>
<p>divに隣接しているので変更されます</p>
<div>
  <p>div階層内なので変更されません</p>
</div>
■ CSS
div + p {
  color: #ff3c07;
}

8．A ~ B（一般兄弟セレクター：要素の後ろにある同じ階層を指定）

セレクターとセレクターの間に「~」を入れて指定することで、右側のセレクターが、左側のセレクターより後にある同じ階層の要素に装飾が適用されます。

■ HTML
<div>divの内容</div>
<p>divと同じ階層なので変わります</p>
<div>
  <p>divと階層が違うので変わりません</p>
</div>
<p>divと同じ階層なので変わります</p>
■ CSS
div ~ p {
  color: #ff3c07;
}

9．A , B（複数のセレクターの指定）

セレクターとセレクターの間に「,（カンマ）」を入れて指定することで、複数のタグやクラスに対して同じ装飾がまとめて適用がされます。

■ HTML
<div>ブログ始めました</div>
<p>ここは変わりません</p>
<span>spanも変わります</span>
<p id="sample">もちろんidも変わります</p>
■ CSS
div, span, #sample {
  color: #ff3c07;
}

まとめ：基本セレクター編

今回はCSSに関して基本的なセレクターをまとめました。CSSセレクターの指定方法を複数知っていると、効率的にCSSを書ける様になります。

基本セレクター以外にも、属性を指定することで装飾を適用する「属性セレクター」や「疑似要素」、「疑似クラス」などの指定方法もあります。
沢山あるので記事を分けましたが、用途に合わせて使い分けられる様になると表現の幅も広がりますよ。

HTMLの書き方によってもCSSの書き方が変わってきますのでHTMLとセットで考えてくださいね。

関連記事【初心者OK】CSS疑似クラスの種類と書き方 超簡単に解説

2023.11.03

関連記事【初心者OK】CSS疑似要素の種類と書き方 超簡単に解説

2023.11.03

関連記事HTMLコメントアウトの書き方、複数行など使い所と注意点を解説

2023.10.11