セレクタ
はじめに
CSSのセレクタに関する基礎知識を備忘録にまとめてみました。
セレクタの種類
シンプルセレクタ Simple Selector
セレクタを構成する最小単位のこと。
仕様書で定義されているシンプルセレクタは下記。
p { color: #FFF; }
ユニバーサルセレクタ
* を指定すると、すべての要素が適用対象。
* { color: #FFF; }
クラスセレクタ
ピリオド(.)に続けてHTMLのclass属性の値を指定すると、そのclass属性の値を持つ要素が適用対象。
※class属性の値全体が一致する必要はない。指定している値がclass属性に含まれれば適用される。
<!-- 適用対象のHTML-->
<p class="desc item">テスト</p>
/* CSSのサンプル */
p.desc { color: #FFF; }
IDセレクタ
#に続けてHTMLのID属性の値を指定すると、そのid属性の値を持つ要素が適用対象。
p#description {color: #FFF; }
属性セレクタ
特定の属性が指定されている要素、特定の属性に特定の値が指定されている要素が適用対象。
[属性名] 属性名の属性が適用対象。※属性値は無関係
a[title] { color: #FFF; }
[属性名 = "属性値"]
属性名の属性に属性値の値が指定したものと完全一致する属性が適用対象。
a[title = "TOPへのリンク"] { color: #FFF; }
[属性名 ~= "属性値"]
属性名の属性に属性値の値が指定したものと一致する属性が適用対象。
指定している値が属性に含まれれば適用される。
<!-- 適用対象のHTML-->
<p class="desc item">テスト</p>
/* CSSのサンプル */
p[class~="desc"] { color: #FFF; }
[属性名 |= "属性値"]
属性名の属性に属性値の値が指定したものと一致する or 指定した値で始まり直後に-で終わる要素が適用対象。
言語のサブコードに使用される。
<!-- 適用対象のHTML-->
<p lang="en-US">test</li>
/* CSSのサンプル */
p[lang|="en"] { color: #FFF; }
[属性名^="属性値の始め"]
属性名の属性の値が属性値の始めで始まる要素が適用対象。
<!-- 適用対象のHTML-->
<p class="desc item">テスト</p>
/* CSSのサンプル */
p[class^="de"] { color: #FFF; }
[属性名$="属性値の終わり"]
属性名の属性の値が属性値の終わりで終わる要素が適用対象。
<!-- 適用対象のHTML-->
<img src="sample.jpg">
/* CSSのサンプル */
img[src$="jpg"] { width: 50%; }
[属性名*="属性値の一部"]
属性名の属性の値が属性値の一部を含む要素
<!-- 適用対象のHTML-->
<a href="https://example.com">sample</a>
/* CSSのサンプル */
a[href*="example"] { color: #FFF; }
疑似クラス
要素が特定の状態にあるとき等に限定して適用対象にするのが疑似クラス。
全部で23種類ある。
:link
リンク先をまだ見ていない状態のa要素
a:link{ color: #FFF; }
:visited
リンク先を既に見た状態のa要素
a:visited { color: purple; }
:hover
カーソルが上にある状態の要素が対象
a:hover { color: red; }
:active
マウスのボタン等が押されている状態の要素
a:active { color: green; }
\ntn-child(式)
先頭から〇個目の要素から△個おきに適用
/* リスト中の2番目の <li> 要素を選択 */
li:nth-child(2) {
color: lime;
}
/* 兄弟要素の中で3つおきに
要素を選択 */
:nth-child(4n) {
color: lime;
}
:ntn-last-child(式)
最後から〇個目の要素から△個おきに適用
/* 兄弟要素の中で、後ろから数えて
3つおきに要素を選択 */
:nth-last-child(4n) {
color: lime;
}
:ntn-of-type(式)
先頭から〇個目の要素から△個おきに適用(指定した要素と同じ要素のみ)
<!-- HTMLのサンプル -->
<div>
<div>This element isn't counted.</div>
<p>1st paragraph.</p>
<p>2nd paragraph.</p>
<div>This element isn't counted.</div>
<p>3rd paragraph.</p>
<p class="fancy">4th paragraph.</p>
</div>
/* CSSのサンプル */
/* 兄弟の <p> 要素の中で、
3つおきに選択 */
p:nth-of-type(4n) {
color: lime;
}
/* 奇数の段落 */
p:nth-of-type(2n+1) {
color: red;
}
/* 偶数の段落 */
p:nth-of-type(2n) {
color: blue;
}
/* 最初の段落 */
p:nth-of-type(1) {
font-weight: bold;
}
/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
p.fancy:nth-of-type(1) {
text-decoration: underline;
}
「an+b」
上記の式が指定できる疑似クラスの式は「an+b」という形式の式または「odd」「even」というキーワードが指定できる。
「odd」を指定すると奇数個目だけ適用され、「even」を指定すると偶数個目だけに適用される。
/* 奇数個目 */
p:nth-of-type(odd) {
font-weight: bold;
}
「an+b」という式は、aとbの部分を整数に置き換えて使用する。(0でも負でも可)
nは0以上の整数を表す。
例)
:ntn-child(2n+1)
20+1=1、21+1=3、2*2+1=5という形で1,3,5個目に適用される。
:ntn-child(2n+0)と書いた場合
20+0=0、21+0=2、2*2+0=4という形で2,4個目に適用される。
0は省略して2nというような形式で記述可能。
※注意
-of-typeで終わっていれば指定した要素と同じタイプで見ていくがntn-childであれば関係なく先頭の要素から見ていく。
疑似要素
タグで囲われている範囲全体をそのまま適用対象にするのではない特殊なセレクタを疑似要素。
CSS3で下記の4種類。
::first-line
ブロックレベルの要素の1行目が適用対象。
<!-- HTMLのサンプル -->
<p class="sample">スタイルはこの段落の最初の行にのみ適用されます。
その後のすべての文字列は普通のスタイルになります。分かりますか？</p>
<span>ブロックレベル要素ではないので、この文字列の最初の行は、
特殊なスタイルになりません。</span>
/* CSSのサンプル */
.sample::first-line { color: blue; }
::first-letter
ブロックレベル要素の1文字目
<!-- HTMLのサンプル -->
<h2 id="letter">My heading</h2>
/* CSSのサンプル */
# letter::first-letter { color: red; }
::before
要素内容の先頭にコンテンツを追加。
<!-- HTMlのサンプル -->
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
/* CSSのサンプル */
.ribbon::before {
content: "このオレンジのボックスを見てください。";
}
::after
要素内容の最後にコンテンツを追加
<!-- HTMlのサンプル -->
<p class="boring-text">古くつまらないテキストです。</p>
/* CSSのサンプル */
.boring-text::after {
content: " <- ツマラナイ！";
color: red;
}
疑似要素は、結合子も含めたセレクタ全体の最後尾に1つしかつけれない。
参考にしたサイト