Weblasts

セレクタの種類

CSSを使って装飾するときに重要なのがどこに対して装飾をするのかを指定する「セレクタ」
色々種類はありますが、よく使うものから覚えていけば大丈夫
少しづつ慣れていきましょう

よく使うセレクタ

まず覚えておきたいセレクタを纏めました。
ここにまとめてあるものを使えれば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>
  Webサイトへの<a>リンク</a>
</p>
<style>
p a{
    color:black;
}
</style>

複数セレクタ

セレクタをカンマ( , )で区切ると、複数のセレクタにまとめて同じスタイルを適用することができます。

例えばh3タグとpタグに対して文字の色を変えるとき

HTML

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

少し複雑な指定方法

直下セレクタ

子孫セレクタによく似ていますが対象の要素は直接の子要素になります
複雑なコードの中でセレクタを指定する場合とても役立ちます。
子孫セレクタのように書いて間に「>」記号を挟んで記述します
例えば「A > B」と書いたらAの直接の子要素のBという形の指定になります

SAMPLE

<style>
/*ダミーテキスト①だけ変えたいなら*/
.box>p{
  color:red;
}
</style>
<div class="box">
  <p>ダミーテキスト①</p>
  <!--ここは変化する-->
  <div>
    <p>ダミーテキスト②</p>
    <!--変化しない-->
  </div>
</div>

隣接セレクタ

指定した要素と同一階層で、直後に出てくる要素のみを指定することができる指定方法です。
こちらも複雑なコードの中でピンポイントで要素を指定するときに役に立ちます。
子孫セレクタのように書いて間に「+」記号を挟んで記述します
例えば「A + B」と書いたらAの直後にあるBという形の指定になります

SAMPLE

<style>
/*.text直後のダミーテキスト④だけ変えたいなら*/
.text1+p{
  color:red;
}
</style>

<p>ダミーテキスト①</p><!--変化しない-->
<p>ダミーテキスト②</p><!--変化しない-->
<p class="text1">ダミーテキスト③</p><!--変化しない-->
<p>ダミーテキスト④</p><!--ここは変化する-->
<p>ダミーテキスト⑤</p><!--変化しない-->

間接セレクタ

指定した要素と同一階層で、移行に出てくる要素を指定することができる指定方法です。
よくボタン系の要素と組み合わせて使われます
子孫セレクタのように書いて間に「~」記号を挟んで記述します
例えば「A ~ B」と書いたらA以降に出てくる同一階層のBという形の指定になります

SAMPLE

<style>
/*.text直後のダミーテキスト④だけ変えたいなら*/
.text2~p{
  color:red;
}
</style>

<p>ダミーテキスト①</p><!--変化しない-->
<p>ダミーテキスト②</p><!--変化しない-->
<p class="text2">ダミーテキスト③</p><!--変化しない-->
<p>ダミーテキスト④</p><!--ここは変化する-->
<p>ダミーテキスト⑤</p><!--ここは変化する-->

Recommend Post