CSSの基礎：セレクタ

＊タイプセレクタ

例：

body{
color:red;
}
h1{
color:blue;
}
p{
color:green;
}

このように、bodyやh1、pなど、HTML側の要素名そのものをセレクタとする。指定されたスタイルは、ページ内すべての同一要素に適応される。

＊classセレクタ

例：

・HTMLファイル

<p class="yamaman">登山が止められない。</p>

・CSSファイル

.yamaman{color:green;}

classセレクタは、HTML側に書いたclass名を利用したセレクタ。例(yamaman)のように、半角英数であれば、class名は自由に設定出来る。この自分で決めたclass名は、HTMLの開始タグ(今回の場合<p>)の中に、class属性値として記述する。

CSS側でclass名の前に「.」を付けたものが、classセレクタである。

また、class名は、頭に数字は付けられない。yamaman1はOKだが、1yamamanは×である。

＊idセレクタ

例：

・HTMLファイル

<h1 id="yamanosusume">cocona</h1>

・CSSファイル

#yamanosusume{color:white;}

idセレクタも、基本的にはclassセレクタと一緒である。違う点は、まず、記述方法として、id名の前に「♯」を付けるということ。次に、classセレクタと違い、同じid名は一度しか使ってはいけない、ということ。学校に例えると、「class＝〇組」、「id＝学籍番号」である。

classセレクタもidセレクタも、

「p.yamaman{color:green;}」

「hi♯yamanosusume{color:white;}」

のように、要素名を書くことも、省略することも出来る。自身が管理しやすい方でいいだろう、とのこと。

＊子孫セレクタ

例：

・HTMLファイル

<p><img src="img/aoi.jpg" alt=""></p>

・CSSファイル

p img{padding:0px;}

HTMLでは、ある要素の中に他の要素が含まれる場合がある。このように、半角スペースで区切ることで、〇〇要素の中の△△要素ていった記述も可能である。

＊複数セレクタ

例：

・HTMLファイル

<h3>先輩ってすごく大きいですよね！</h3>

<p>明日は日光白根山に登ります。</p>

・CSSファイル

h3,p{color:pink;}

半角カンマで繋ぐことで、複数の要素にスタイル指定することも出来る。