閉じる

CSSのidとclass セレクターについて

CSSセレクタとは

CSSセレクタは、スタイルを設定するHTML要素(要素名、ID名、クラス名、属性など)を指します。

上記の例でいうと、前述しましたがh2と.sampleです。

要素セレクタとは

要素セレクタは、設定されたHTML要素、すべてに適用されます。
例えば、サイト全体の<h4>に、スタイルを指定したい場合などに使用します。


h4 {
color: #ff0000 ;
font-size:170%;
}

idセレクタとは

idセレクタは、HTML要素のid属性を指定している場合に適用されます。
idは、#の後ろに要素IDを記述します。

このidの使用で、2つ注意点があります。
1、1HTML内で1つだけ使用できます。
2、数字からはじめられません。先頭はアルファベットにしてください。

NG例(id、testを2回使っている)


<div id="test">
idセレクタとは一回のみです。
</div>
<div id="test">
idセレクタとは一回のみです。
</div>

上記のような場合は、id名を変更するか、classを使用しましょう。

classセレクタとは

classセレクタは、HTML要素のclass属性を指定している場合に適用されます。
classは、.の後ろに要素classを記述します。

idは、1HTML内で1つだけ使用できるのに対し、classは、何度でも使用できます。

class testは何度使ってもOK

<div class="test">
classセレクタとは何度でも使えます。
</div>
<div class="test">
classセレクタとは何度でも使えます。
</div>

 

ページ上部へ戻る