Web制作のアレコレ

セレクタの種類

タイプセレクタ

タイプセレクタは「body」や「p」などの要素(タグ)を直接セレクタに指定した形
タイプセレクタで指定された要素は、ページ内にあるすべての要素に対してcssが適用される。

CSS


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

classセレクタ

classセレクタはclass名を利用したセレクタ
class名は開始タグの中にclass属性の値として設定する。
セレクタとして利用する場合はclass名の前に「.」ドットをつけてセレクタに設定する。

HTML


<p class="test">クラスセレクタのテスト</p>

<style>
.test{
    color:green;
}
</style>

idセレクタ

idセレクタはid名を利用したセレクタ
id名は開始タグの中にid属性の値として設定する。
セレクタとして利用する場合はid名の前に「#」をつけてセレクタに設定する.

HTML


<h1 id="logo">idセレクタ</h1>
<style>
#logo{
    color:green;
}
</style>

子孫セレクタ

セレクタを半角スペースで区切ると、 ある要素の下の階層にある子孫要素を対象にスタイルを適用することができます。
例えばpタグの中にあるaタグに対して文字の色を変えるとき

HTML


<p>
  インタープランITスクールへの<a>リンク</a>
</p>
<style>
p a{
    color:black;
}
</style>

複数セレクタ

セレクタをカンマ( , )で区切ると、複数のセレクタにまとめて同じスタイルを適用することができます。
例えばh2タグとpタグに対して文字の色を変えるとき

HTML


<h2>今日のお天気</h2>
<p>今日は晴れです。</p>
<style>
h2,p{
    color:gray;
}
</style>