【CSS】セレクター
セレクターとは
CSS では、セレクターによってスタイルを適用する要素を表現します。
/* .selector がセレクター */
.selector {
background: white;
color: red;
}基本セレクター
全称セレクター
全称セレクター「*」は、すべての要素に対してスタイルを適用します。
<p>text1</p>
<div>text2</div>* {
color: red;
}text1
要素型セレクター
要素名をセレクターとして指定し、その要素にスタイルを適用します。
<p>text1</p>
<div>text2</div>p {
color: red;
}text1
ID セレクター
ID 属性の値を指定し、対象の要素にスタイルを適用します。
ID セレクターは、#ID属性の値と表現します。
<p id="elm1">text1</p>
<p id="elm2">text2</p>#elm1 {
color: red;
}text1
text2
クラスセレクター
クラス属性の値を指定し、対象の要素にスタイルを適用します。
クラスセレクターは、.クラス属性の値と表現します。
<p class="elm1">text1</p>
<p class="elm2">text2</p>.elm1 {
color: red;
}text1
text2
属性セレクター
特定の属性を持つ、または属性の値を持つ要素に対してスタイルを適用します。
属性の指定は要素名[]とします。
attr
属性attrを持つ要素を表します。
<p data-red>text1</p>
<p data-blue>text2</p>p[data-red] {
color: red;
}
p[data-blue] {
color: blue;
}text1
text2
attr=value
属性attrの値がvalueと完全一致する要素を表します。
<p name="val1">text1</p>
<p name="val2">text2</p>p[name="val1"] {
color: red;
}text1
text2
attr~=value
属性attrの値がvalueと完全一致する要素を表します。
ただし、class="class-a class-b"のように、スペース区切りで複数の値をしている場合、いずれかがvalueと一致していれば対象の要素となります。
<!-- [attr=value] -->
<p class="class-a">text1</p>
<p class="class-a class-b">text2</p>
<!-- [attr~=value] -->
<p class="class-c">text1</p>
<p class="class-c class-d">text2</p>p[class="class-a"] {
color: red;
}
p[class~="class-c"] {
color: red;
}[attr=value]
text1
text2
[attr~=value]
text1
text2
attr|=value
属性attrの値がvalueと完全一致する要素、またはvalue-XXXのようにvalueの後に-で連結した値をもつ要素を表します。
<p name="val">text1</p>
<p name="val-sub">text2</p>p[name|="val"] {
color: red;
}text1
text2
attr^=value
属性attrの値がvalueから始まる値の要素を表します。
<p name="val-a">text1</p>
<p name="val-b">text2</p>p[name^="val"] {
color: red;
}text1
text2
attr$=value
属性attrの値がvalueで終わる値の要素を表します。
<p name="a-val">text1</p>
<p name="b-val">text2</p>
</p>p[name$="val"] {
color: red;
}text1
text2
attr operator value i
[attr=value i]のようにiを付与すると、大文字と小文字を区別せずに判別されます。
<p name="val">text1</p>
<p name="VAL">text2</p>p[name="val" i] {
color: red;
}text1
text2
セレクターリスト
複数のセレクターに対して同じスタイルを適用したい場合は、,でセレクターを連結します。
<p class="class-a">text1</p>
<p class="class-b">text2</p>.class-a, .class-b {
color: :red;
}text1
text2
セレクターの結合
要素の関係性の表現について
<div class="elm">
<div class="elmA">
<div class="elmA-1"></div>
<div class="elmA-2"></div>
</div>
<div class="elmB">
<div class="elmB-1"></div>
</div>
<div class="elmC">
<div class="elmC-1"></div>
</div>
</div>HTML 要素の関係性は、家系図のように「子」、「親」、「子孫」、「祖先」、「兄弟」と表現することがあります。
- 「子」は直後の階層の要素を指します。
.elmの「子」は.elmA、.elmB、.elmCです。 - 「親」は直前の階層の要素を指します。
.elmA、.elmB、.elmCの「親」は.elmです。 - 「子孫」は自身が内包しているすべての要素を指します。
.elm以外の要素は.elmの「子孫」です。 - 「祖先」は自信を内包しているすべての要素を指します。
.elmA-1の「祖先」は.elmA、.elmです。 - 「兄弟」は同じ階層かつ同じ親をもつ要素を指します。
.elmA、.elmB、.elmCは「兄弟」になります。
さらに要素の順序で「兄」と「弟」が決まります。.elmB、.elmCは.elmAの「弟」で、.elmA、.elmBは.elmCの「兄」となります。
子結合
「子」の要素にスタイルを適用したい場合は、>でセレクターを結合します。
<div class="elm">
<p>text1</p>
<div>
<p>text2</p>
</div>
</div>.elm > p {
color: red;
}text1
text2
子孫結合
「子孫」の要素にスタイルを適用したい場合は、 （スペース）でセレクターを結合します。
<div class="elm">
<p>text1</p>
<div>
<p>text2</p>
</div>
</div>.elm p {
color: red;
}text1
text2
一般兄弟結合
すべての「弟」の要素にスタイルを適用したい場合は、~でセレクターを結合します。
<div>
<p class="elm">text1</p>
<p>text2</p>
<p>text3</p>
</div>.elm ~ p {
color: red;
}text1
text2
text3
隣接兄弟結合
直後の（隣接した）「弟」の要素にスタイルを適用したい場合は、+でセレクターを結合します。
<div>
<p class="elm">text1</p>
<p>text2</p>
<p>text3</p>
</div>.elm + p {
color: red;
}text1
text2
text3