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 セレクタとは異なり1つの要素にしか適用されません。
#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="タイトル1">タイトル1</a>
属性セレクタ E[foo="bar"]
foo
属性の値が bar
である E
要素にスタイルを適用します。以下の例では title
属性に "タイトル1"
の値を持つ a
タグにスタイルを適用します。
a[title="タイトル1"] {
color: red;
}
<a href="#" title="タイトル1">タイトル1</a>
属性セレクタ E[foo~="bar"]
foo
属性が空白区切りの値をとり、その値の1つが bar
である E
要素にスタイルを適用します。以下の例では class
属性に空白区切りの bar
と一致する値を持つ a
タグにスタイルを適用します。
a[class~="bar"] {
color: red;
}
<a href="#" class="foo bar">タイトル1</a>
属性セレクタ E[foo^="bar"]
foo
属性の値が bar
から始まる E
要素にスタイルを適用します。以下の例では title
属性に "タイトル"
から始まる値を持つ a
タグにスタイルを適用します。
a[title^="タイトル"] {
color: red;
}
<a href="#" title="タイトル1">タイトル1</a>
<a href="#" title="タイトル2">タイトル2</a>
属性セレクタ E[foo$="bar"]
foo
属性の値が bar
で終わる E
要素にスタイルを適用します。以下の例では title
属性に "タイトル"
で終わる値を持つ a
タグにスタイルを適用します。
a[title$="タイトル"] {
color: red;
}
<a href="#" title="1つ目のタイトル">タイトル1</a>
<a href="#" title="2つ目のタイトル">タイトル2</a>
属性セレクタ E[foo*="bar"]
foo
属性の値が bar
の文字列を含む E
要素にスタイルを適用します。以下の例では title
属性に "その"
を含む値を持つ a
タグにスタイルを適用します。
a[title*="その"] {
color: red;
}
<a href="#" title="タイトルその1">タイトル1</a>
<a href="#" title="タイトルその2">タイトル2</a>
属性セレクタ E[foo|="en"]
foo
属性の値がハイフン区切りの値をとり、その値が en
から始まる E
要素にスタイルを適用します。以下の例では hreflang
属性に en
を含む値を持つ a
タグにスタイルを適用します。
a[hreflang|="en"] {
color: red;
}
<a href="#" hreflang="en">タイトル1</a>
<a href="#" hreflang="en-US">タイトル2</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 … 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>
1行目 ← ここに適用
<br>
2行目
</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:"要素の後ろに疑似要素を生成します";
}