CSS セレクタの種類と書き方
全称セレクタ *
全称セレクタは、アスタリスク * ですべての要素に適用するスタイルを定義できます。
* {
color: red;
}p 要素の配下にあるすべての要素に適用するスタイルを定義したい場合は以下のように記述します。
p * {
color: red;
}型セレクタ E
型セレクタは、HTML の要素名をセレクタとして指定した要素にスタイルが適用されます。
h1 {
color: red;
}class セレクタ E.myclass
class セレクタは、先頭に . を付与したクラス名を指定した要素にスタイルが適用されます。
.myclass {
color: red;
}<p class="myclass">ここが適用されます</p>以下のような指定も可能です。
p.myclass {
color: red;
}<p class="myclass">ここが適用されます</p>
<div class="myclass">ここは適用されません</div>id セレクタ E#myid
id セレクタは、先頭に # を付与したクラス名を指定した要素にスタイルが適用されます。ただし、class セレクタとは異なり１つの要素にしか適用されません。
#myid {
color: red;
}否定疑似クラス E:not(s)
指定したセレクタに該当しない場合にスタイルが適用されます。以下の例では、myid を付与した p タグ以外にスタイルが適用されます。
p:not(#myid) {
color: red;
}子孫結合子 E F
セレクタを半角スペースで区切ると、ある要素の配下にある要素にスタイルを適用します。以下の例では、p タグの中にある strong 要素に適用されます。
p strong {
color: red;
}<p><strong>ここ</strong>が適用されます</p>子結合子 E > F
セレクタを > で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。以下の例では、クラス名 sample の直下にある a 要素にのみ適用されます。
div.sample > a {
color: red;
}<div class="sample">
<a href="#">ここが適用されます<a/>
<ul>
<li><a href="#">ここは適用されません<a/></li>
</ul>
<div>隣接兄弟結合子 E + F
+ で隣接している要素にスタイルを適用します。
h4 + p {
color: red;
}<h4>タイトル</h4>
<p>隣接しているここが適用されます</p>
<p>隣接していないのでここは適用されません</p>一般兄弟結合子 E ~ F
~ である要素の後にある要素にスタイルを適用します。
h4 ~ p {
color: red;
}<p>h4 の前にあるここは適用されません</p>
<h4>タイトル</h4>
<p>h4 の後ろにあるここが適用されます</p>
<p>h4 の後ろにあるここが適用されます</p>属性セレクタ
セレクタは要素の属性の表現もできます。CSS3 では、以下の属性セレクタが定義されています。
属性セレクタ E[foo]
foo 属性を持つ E 要素にスタイルを適用します。以下の例では title 属性を持つ a タグにスタイルを適用します。
a[title] {
color: red;
}<a href="#" title="タイトル１">タイトル１</a>属性セレクタ E[foo="bar"]
foo 属性の値が bar である E 要素にスタイルを適用します。以下の例では title 属性に "タイトル１" の値を持つ a タグにスタイルを適用します。
a[title="タイトル１"] {
color: red;
}<a href="#" title="タイトル１">タイトル１</a>属性セレクタ E[foo~="bar"]
foo 属性が空白区切りの値をとり、その値の1つが bar である E 要素にスタイルを適用します。以下の例では class 属性に空白区切りの bar と一致する値を持つ a タグにスタイルを適用します。
a[class~="bar"] {
color: red;
}<a href="#" class="foo bar">タイトル１</a>属性セレクタ E[foo^="bar"]
foo 属性の値が bar から始まる E 要素にスタイルを適用します。以下の例では title 属性に "タイトル" から始まる値を持つ a タグにスタイルを適用します。
a[title^="タイトル"] {
color: red;
}<a href="#" title="タイトル１">タイトル１</a>
<a href="#" title="タイトル２">タイトル２</a>属性セレクタ E[foo$="bar"]
foo 属性の値が bar で終わる E 要素にスタイルを適用します。以下の例では title 属性に "タイトル" で終わる値を持つ a タグにスタイルを適用します。
a[title$="タイトル"] {
color: red;
}<a href="#" title="１つ目のタイトル">タイトル１</a>
<a href="#" title="２つ目のタイトル">タイトル２</a>属性セレクタ E[foo*="bar"]
foo 属性の値が bar の文字列を含む E 要素にスタイルを適用します。以下の例では title 属性に "その" を含む値を持つ a タグにスタイルを適用します。
a[title*="その"] {
color: red;
}<a href="#" title="タイトルその１">タイトル１</a>
<a href="#" title="タイトルその２">タイトル２</a>属性セレクタ E[foo|="en"]
foo 属性の値がハイフン区切りの値をとり、その値が en から始まる E 要素にスタイルを適用します。以下の例では hreflang 属性に en を含む値を持つ a タグにスタイルを適用します。
a[hreflang|="en"] {
color: red;
}<a href="#" hreflang="en">タイトル１</a>
<a href="#" hreflang="en-US">タイトル２</a>構造疑似クラス
セレクタは、構造疑似クラスによって他の単体セレクタや結合子では表現できない選択を可能にします。CSS3 では、以下の構造疑似クラスが定義されています。
構造疑似クラス E:root
文書のルート要素である E 要素にスタイルを適用します。ルート要素は最上位の要素になるため、html 要素になります。
:root {
color: red;
}構造疑似クラス E:nth-child(n)
n 番目の子である E 要素にスタイルを適用します。以下の例では、親要素 div の n(5) 番目の子要素である E(p) 要素に適用されます。
div p:nth-child(5){
color: red;
}<div>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p> ← ここに適用
<p>6つ目のp要素</p>
</div>n の値については数字で以外にも以下の指定方法があります。
- 2 … ２番目の要素に適用
- odd … 奇数番目の要素に適用
- 2n+1 … 奇数番目の要素に適用
- even … 偶数番目の要素に適用
- 2n … 偶数番目の要素に適用
- 3n … 3,6,9,12...番目の要素に適用
- 3n+1 … 1,4,7,10...番目の要素に適用
構造疑似クラス E:nth-last-child(n)
後ろから数えて n 番目の子である E 要素にスタイルを適用します。以下の例では、親要素 div の後ろから数えて n(5) 番目の子要素である E(p) 要素に適用されます。
div p:nth-last-child(5){
color: red;
}<div>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p> ← ここに適用
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p>
</div>構造疑似クラス E:nth-of-type(n)
同じ型をもつ要素のうち n 番目にある E 要素にスタイルを適用します。以下の例では、親要素 div 内で兄弟関係にある E(p) 要素のうち n(5) 番目の要素に適用されます。E:nth-child(n) は、指定した要素の配下にあるすべての要素に対してカウントしますが、E:nth-of-type(n) は同じ型に対してのみカウントします。そのため、以下の例では E(p) 要素に対してのみカウントが行われます。
div p:nth-of-type(5){
color: red;
}<div>
<!-- p 要素以外の要素 -->
<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p> ← ここに適用
<p>6つ目のp要素</p>
</div>構造疑似クラス E:nth-last-of-type(n)
同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素にスタイルを適用します。以下の例では、親要素 div 内で兄弟関係にある E(p) 要素のうち、後ろから数えて n(5) 番目の子要素に適用されます。
div p:nth-last-of-type(5){
color: red;
}<div>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p> ← ここに適用
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p>
<!-- p 要素以外の要素 -->
</div>構造疑似クラス E:first-child
最初の子である E 要素にスタイルを適用します。
div p:first-child{
color: red;
}<div>
<p>1つ目のp要素</p> ← ここに適用
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p>
</div>構造疑似クラス E:last-child
最後の子である E 要素にスタイルを適用します。
div p:last-child{
color: red;
}<div>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p> ← ここに適用
</div>構造疑似クラス E:first-of-type
同じ型をもつ要素のうち最初の E 要素にスタイルを適用します。
div p:first-of-type{
color: red;
}<div>
<!-- p 要素以外の要素 -->
<p>1つ目のp要素</p> ← ここに適用
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p>
</div>構造疑似クラス E:last-of-type
同じ型をもつ要素のうち最後の E 要素にスタイルを適用します。
div p:last-of-type{
color: red;
}<div>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
<p>3つ目のp要素</p>
<p>4つ目のp要素</p>
<p>5つ目のp要素</p>
<p>6つ目のp要素</p> ← ここに適用
<!-- p 要素以外の要素 -->
</div>構造疑似クラス E:only-child
唯一の子である E 要素にスタイルを適用します。
div p:only-child{
color: red;
}<div>
<h6>h6要素</h6>
<p>1つ目のp要素</p>
</div>
<div>
<p>1つ目のp要素</p> ← ここに適用
</div>構造疑似クラス E:only-of-type
同じ型をもつ要素が他にない唯一の E 要素にスタイルを適用します。
div p:only-of-type{
color: red;
}<div>
<h6>h6要素</h6>
<p>1つ目のp要素</p>
<p>2つ目のp要素</p>
</div>
<div>
<h6>h6要素</h6>
<p>1つ目のp要素</p> ← ここに適用
</div>
<div>
<p>1つ目のp要素</p> ← ここに適用
</div>構造疑似クラス E:empty
テキストノードを含め、子を持たない E 要素にスタイルを適用します。
div p:empty{
display: none;
}<div>
<p>テキストあり</p>
<p><strong>子要素あり</strong></p>
<p></p> ← ここに適用
</div>リンク疑似クラス
セレクタは未訪問のリンクと訪問済みのリンクを区別するための疑似クラスを定義できます。CSS3 では、以下のリンク疑似クラスが定義されています。
リンク疑似クラス E:link
ハイパーリンクのアンカーである E 要素のうち、未訪問 :link である要素にスタイルを適用します。
a:link {
color : red;
}リンク疑似クラス E:visited
ハイパーリンクのアンカーである E 要素のうち、訪問済み :visited である要素にスタイルを適用します。ただし、訪問済み :visited は color プロパティしか適用されません。
a:visited {
color : red;
}ユーザーアクション疑似クラス
特定のユーザーアクション状態にある疑似クラスを定義できます。CSS3 では、以下のリンク疑似クラスが定義されています。
ユーザーアクション疑似クラス: E:active
:active 疑似クラスは、ユーザーによって実行された要素に適用されます。以下の例では、リンクは赤色になりますが、クリックしている間だけは緑色になります。
a {
color : red;
}
a:active {
color : green;
}ユーザーアクション疑似クラス: E:hover
:hover 疑似クラスは、ユーザーがポインティングデバイスで示した要素に適用されます。以下の例では、リンクは赤色になりますが、ポインタを乗せている間だけは緑色になります。
a {
color : red;
}
a:hover {
color : green;
}ユーザーアクション疑似クラス E:focus
:focus 疑似クラスは、フォーカスを持つ要素に適用されます。フォーカスとは、キーボードもしくはマウスイベント、あるいはその他の入力を許可する状態を表します。また、フォーカスは他の疑似クラスと組み合わせられます。
以下の例では、リンクにフォーカスしている間だけは緑色になります。また他の疑似クラスと組み合わせると、訪問済みの場合は赤色、未訪問の場合は黄色にもできます。
.sample1:focus {
color : green;
}
.sample2:focus:hover {
color : green;
}
.sample3:focus:link {
color : red;
}
.sample3:focus:visited {
color : yellow;
}ターゲット疑似クラス E:target
URI が参照したターゲットになる E 要素にスタイルを適用します。以下の例では、ページ内リンクによって指定された URI にジャンプすると、その要素に対してスタイルが適用されます。
p:target{
color:red;
}<a href="#sample">リンク</a>
<p id="sample">ここに適用</p>:lang() 疑似クラス E:lang(fr)
言語情報 :lang(fr) を持つ E 要素にスタイルを適用します。ただし、言語情報の決定方法は文書言語が規定します。
:lang(ja) {
color: red;
}:lang() 疑似クラス<body lang="ja">ここに適用</body>:lang() 疑似クラスUI 要素状態疑似クラス
E 要素の状態に対してスタイルを適用します。CSS3 では、以下の UI 要素状態疑似クラスが定義されています。
UI 要素状態疑似クラス E:enabled
UI 要素である E のうち、有効 :enabled である要素にスタイルを適用します。
input:enabled {
background-color: red;
}<input type="text">UI 要素状態疑似クラス E:disabled
UI 要素である E のうち、無効 :disabled である要素にスタイルを適用します。
input:disabled {
background-color: red;
}<input type="text" disabled>UI 要素状態疑似クラス E:checked
UI 要素である E のうち、チェックされた :checked チェックボックスやラジオボタンなどにスタイルを適用します。
:checked {
color: red;
}<input type="checkbox">
<input type="radio">疑似要素
疑似要素は文書ツリー上に文書言語によって記された以上の抽象概念を生成し、本来はアクセスできない要素内容の最初の行・最初の文字への要素の情報の取扱や、疑似要素は元文書に存在しない内容を参照できます。CSS3 では、以下の疑似要素が定義されています。
疑似要素 E::first-line
E 要素の最初の整形済行に対してアクセスします。
p::first-line {
font-weight: bold;
}<p>
１行目 ← ここに適用
<br>
２行目
</p>疑似要素 E::first-letter
E 要素の先頭文字に対してアクセスします。
p::first-letter {
font-weight: bold;
}疑似要素 E::before
E 要素の内容の前にコンテンツを生成します。なお、生成コンテンツはインライン要素になります。また、::first-letter と ::first-line を同時に適用する場合は、::before によって生成される要素に適用されます。
p::before {
content:"要素の前に疑似要素を生成します";
}疑似要素 E::after
E 要素の内容の後ろにコンテンツを生成します。なお、生成コンテンツはインライン要素になります。
p::after {
content:"要素の後ろに疑似要素を生成します";
}