今回から3回に分けてCSSのセレクターの指定の仕方について説明していこうと思います
そんなにボリュームがあるの！？
知っていると便利なものもあるからね
でも初心者の間はそこまで使わないんじゃないかと思います
なら安心だね
なのでこの章だけでも簡単なサイトの模写くらいなら作成できると思います
もしもっと詳しくセレクターの指定の仕方を知りたい方はその２、その３も読んでくれると嬉しいです
1.基本のセレクターの指定
1-1.要素セレクター
h1やpなどの要素を指定します。
要素{
プロパティ: 値;
}<p>おはよう</p>
<div>こんにちは</div>
<div>こんばんは</div>p{
color: red;
}
/*p要素を指定し、文字色を赤にする*/おはよう
p要素にだけ適用されてdiv要素には適用されていません。
1-2.class,idセレクター
class属性やid属性のついているものを指定します。
classなら.(ドット)からidなら＃(ハッシュ)から書き始めます。
.名前、または#名前{
プロパティ: 値;
}<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>#first{
color: red;
}
/*id=firstを指定し、文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
1-3.グループセレクター
カンマで区切る事で複数の要素を指定する事ができます。
要素,要素{
プロパティ: 値;
}もちろんclassやidでもおkです。
<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>#first,#third{
color: red;
}
/* id=firstとthirdの文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
#firstと#thirdにCSSが適用されています。
カンマを区切る事でいくつでもつなげることもできます
2.結合子によるセレクターの指定
結合子とは要素と要素を繋ぐ記号の事です。使用する記号によって役割が変わってきます。
2-1.子セレクター
＞(大なり)記号を使って直下(1階層下)にあるセレクターを指定します。
要素 > 要素{
プロパティ: 値;
}<ul>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li><span>テキストテキストテキスト</span></li>
<li>テキストテキストテキスト</li>
</ul>li > span{
color: red;
}
/*li直下のspanの文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
liの直下にspanがついているものを指定しています。
2-2.子孫セレクター
要素と要素の間に半角スペースを空けて特定の要素の内側に絞って指定します。
要素 要素{
プロパティ: 値;
}<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>ul #second{
color: red;
}
/*ulの内側のid=secondの文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
子セレクターは直下の要素を指定し、子孫セレクターは要素の内側を指定するかの違いがあります。
少しややこしいね
2-3.隣接セレクター
指定した要素の次の要素を指定します。
セレクター + セレクター{
プロパティ: 値;
}<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト/li>
</ul>#second + li{
color: red;
}
/*id=secondの次の要素の文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
#secondの次の要素である３番目のli要素が選択されます。
2-4.間接セレクター
特定のセレクターと要素を~(チルダ)で結んで指定したセレクターの後の要素以降を指定します。
セレクター~{
プロパティ: 値;
}<ul>
<li id="first">テキストテキストテキスト</li>
<li id="second">テキストテキストテキスト</li>
<li id="third">テキストテキストテキスト</li>
<li id="fourth">テキストテキストテキスト</li>
</ul>#second~li{
color: red;
}
/* id=secondの次のli要素からの要素の文字色を赤にする*/- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
#second以降のli要素が選択されています。
以降の要素全てってところが隣接セレクターと異なるところに注意です
3.まとめ
まとめましたので実際に考えながら動かしてみてください！
<div class="matome">
<ul>
<li id="first" class="text1">テキストテキストテキスト</li>
<li id="second" class="text2">テキストテキストテキスト</li>
<li id="third" class="text3">テキストテキストテキスト</li>
<li id="fourth" class="text4">テキストテキストテキスト</li>
</ul>
<div class="sub">
<span class="text1">テキストテキストテキスト</span>
<span class="text2">テキストテキストテキスト</span>
<span class="text3">テキストテキストテキスト</span>
</div>
</div>- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
要素セレクター /*要素を指定*/
li{
color: red;
}
/*li要素を指定し文字色を赤に*/
class,idセレクター /* class属性やid属性を指定*/
#fourth{
color: blue;
}
/*id="fourth"を指定し文字色を青に*/
グループセレクター /*カンマで区切って複数の要素を指定*/
#second,span{
color: pink;
}
/*id="second"とspan要素を指定し文字色をピンクに*/
子セレクター /*＞(大なり)で直下にある要素を指定*/
.sub>text3{
color: greenyellow;
}
/*class="sub"直下のclass="text3"を指定し文字色を黄緑に*/
子孫セレクター /*半角スペースを空ける事で特定の要素の内側にある要素を指定*/
.matome .text3{
color: tomato;
}
/*class="matome"の中のclass="text3"を指定し文字色をtomatoに*/
隣接セレクター /*+で指定した要素の次の要素を指定*/
#second+li{
color: tan;
}
/*id="second"の次のli要素を指定(3番目のli要素のみ)し文字色をtanに*/
間接セレクター /*~(チルダ)で指定した要素の次以降の要素を指定し文字色を黄緑に*/
#first~li{
color: skyblue;
}
/*id="first"の次のli要素以降からを指定(2,3,4番目のli要素)し文字色をskyblueに*/| 記号 | 意味 | |
|---|---|---|
| 子セレクター | > | 直下にある要素を指定 |
| 子孫セレクター | 半角スペース | 内側にある要素を指定 |
| 隣接セレクター | ＋ | 指定したものの次の要素を指定 |
| 間接セレクター | 〜 | 指定したもの以降の要素を指定 |
最初にもいいましたが基本はこれくらいで大丈夫です
次回は知っていると指定が便利なセレクターをやりたいと思います
コメント