CSS セレクタの種類と書き方

全称セレクタ *

全称セレクタは、アスタリスク * ですべての要素に適用するスタイルを定義できます。

* {
    color: red;
}
全称セレクタ

p 要素の配下にあるすべての要素に適用するスタイルを定義したい場合は以下のように記述します。

p * {
    color: red;
}
全称セレクタ

型セレクタ E

型セレクタは、HTML の要素名をセレクタとして指定した要素にスタイルが適用されます。

h1 {
    color: red;
}
型セレクタ

class セレクタ E.myclass

class セレクタは、先頭に . を付与したクラス名を指定した要素にスタイルが適用されます。

.myclass {
    color: red;
}
class セレクタ
<p class="myclass">ここが適用されます</p>
class セレクタ

以下のような指定も可能です。

p.myclass {
    color: red;
}
class セレクタ
<p class="myclass">ここが適用されます</p>
<div class="myclass">ここは適用されません</div>
class セレクタ

id セレクタ E#myid

id セレクタは、先頭に # を付与したクラス名を指定した要素にスタイルが適用されます。ただし、class セレクタとは異なり1つの要素にしか適用されません。

#myid {
    color: red;
}
id セレクタ

否定疑似クラス 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 要素にスタイルを適用します。以下の例では、親要素 divn(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 である要素にスタイルを適用します。ただし、訪問済み :visitedcolor プロパティしか適用されません。

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;
}
UI 要素状態疑似クラス
<input type="text">
UI 要素状態疑似クラス

UI 要素状態疑似クラス E:disabled

UI 要素である E のうち、無効 :disabled である要素にスタイルを適用します。

input:disabled {
    background-color: red;
}
UI 要素状態疑似クラス
<input type="text" disabled>
UI 要素状態疑似クラス

UI 要素状態疑似クラス E:checked

UI 要素である E のうち、チェックされた :checked チェックボックスやラジオボタンなどにスタイルを適用します。

:checked {
    color: red;
}
UI 要素状態疑似クラス
<input type="checkbox">
<input type="radio">
UI 要素状態疑似クラス

疑似要素

疑似要素は文書ツリー上に文書言語によって記された以上の抽象概念を生成し、本来はアクセスできない要素内容の最初の行・最初の文字への要素の情報の取扱や、疑似要素は元文書に存在しない内容を参照できます。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:"要素の後ろに疑似要素を生成します";
}
疑似要素
Category:
プログラミング
公開日:
更新日:
Pageviews:
3,509
Shares:
11
Tag:
CSS