cssの種類はどんなのがある？ーーセレクタの種類

cssとは

CSSは、正式名称を「Cascading Style Sheets」と言い、スタイルシートとも言われています。文書の飾りつけをしてくれる言語で、ほとんどのサイトに使用されています。

文書というのは、一般的にはHTMLで書かれたものが多いですが、それらを色やサイズを変えてくれるのがCSSというわけです。

CSSは色やサイズ、配置など基本的なことからアニメーションのようなものまで使うことができます。

cssのセレクタとは

CSSのセレクタを説明する前に、CSSの構文について説明します。

CSSの構文は以下のように書きます。

☆CSSの構文

セレクタ {
  プロパティ: 値;
}

h1 {
  color: red;
}

セレクタというのは、HTMLがわかる方にはイメージがつきやすいと思いますが、要素のことを言います。

HTMLは、文字に意味をもたせるときには、タグと言われる要素で囲んで表示します。

例えば、構文の例である<h1>タグは文書の中で見出しを意味します。

この見出しに対して例のCSSではh1（セレクタ）に赤（値）で色（プロパティ）をつけているのです。

セレクタの種類

セレクタには、様々な種類があります。今回は５種類のセレクタについて紹介します。

• 要素セレクタ
• 全称セレクタ
• classセレクタ
• Idセレクタ
• 子・子孫セレクタ

要素セレクタ

要素セレクタというのは、HTMLの要素を使用して指定します。

例えば、HTMLの要素が<h1>だとすると

h1 {
  color: red;
}

全称セレクタ

全称セレクタというのは、ユニバーサルセレクタともいい全ての要素に対して指定します。

＊（アスタリスク）を使用します。

* {
  color: blue;
}

HTMLの文書が複数あった場合全て青い文字になります。

classセレクタ

classセレクタはclassを利用して指定します。

classというのは、HTMLでは要素に対してつける名前です。

どの要素に対して装飾したいのかを名前をつけて示します。

<div class="class_name1">
  <h1>サンプル</h1>
</div>
<div class="class_name2">
  <p>サンプル</p>
</div>

.class_name1 {
  color: red;
}

idセレクタ

idセレクタというのは、idを利用して指定します。

classと同じでHTMLの要素に名前をつけるときに使用します。

<div id="id_name1">
  <h1>サンプル</h1>
</div>
<div id="id_name2">
  <p>サンプル</p>
</div>

#id_name1 {
  color: red;
}

子・子孫セレクタ

親の直下にある要素に対して装飾するために利用します。

親と子要素は「＞」を使って区切ります。

子セレクタには似たようなセレクタとして子孫セレクタというのがあります。

子孫セレクタは、子セレクタと違い親要素直下のものだけでなく、子と孫全ての要素に対して指定したい場合に利用します。

子セレクタは以下のように書きます。

<div class="sample">
  <p>サンプル</p>
</div>

.sample > p {
  color: red;
}

子孫セレクタは以下のように書きます。

この場合、全てのpタグを指定指定ます。

まとめ

CSSの種類やセレクタについてわかったのではないでしょうか。

セレクタについては５種類のセレクタを紹介しました。

class、idについてはHTMLを学んでいるとよく使うセレクタです。

ぜひ活用してみてください。