CSSセレクタ一覧

CSS のセレクタ一覧です。セレクタを組み合わせて HTML(XML) の特定の要素に対してプロパティを適用します。セレクタの優先度は詳細度で決まります。

CSS は2012年8月現在で CSS1, CSS2, CSS2.1 が正式に勧告されており、CSS3 が策定中です。CSS はレベルを重ねる度に内容が追加されていきます。そのため、CSS1 にしか対応していないブラウザでは CSS2 のセレクタを使用できませんが、CSS2 に対応しているブラウザでは CSS1 のセレクタも使用できます。

CSS 記述例 詳細度 (ID > クラス・属性 > 要素)
全称セレクタ 2 * 0 > 0 > 0
型セレクタ 1 a 0 > 0 > 1
属性セレクタ 2 a[target]
a[rel="follow"]
a[rel~="follow"]
a[lang|="en"]
0 > 1 > 1
3 a[href^="http://"]
a[href$=".html"]
a[href*=".com"]
:root擬似クラス 3 :root 0 > 1 > 0
:nth-child擬似クラス 3 dt:nth-child(2) 0 > 1 > 1
:nth-last-child擬似クラス 3 dt:nth-last-child(2) 0 > 1 > 1
:nth-of-type擬似クラス 3 dt:nth-of-type(2) 0 > 1 > 1
:nth-last-of-type擬似クラス 3 dt:nth-last-of-type(2) 0 > 1 > 1
:first-child擬似クラス 2 ul :first-child 0 > 1 > 1
:last-child擬似クラス 3 ul :last-child 0 > 1 > 1
:first-of-type擬似クラス 3 dl :first-of-type 0 > 1 > 1
:last-of-type擬似クラス 3 dl :last-of-type 0 > 1 > 1
:only-child擬似クラス 3 p:only-child 0 > 1 > 1
:only-of-type擬似クラス 3 p:only-of-type 0 > 1 > 1
:empty擬似クラス 3 div:empty 0 > 1 > 1
:link擬似クラス 1 a:link 0 > 1 > 1
:visited擬似クラス 1 a:visited 0 > 1 > 1
:hover擬似クラス 2 button:hover 0 > 1 > 1
:active擬似クラス 1 button:active 0 > 1 > 1
:focus擬似クラス 2 textarea:focus 0 > 1 > 1
:target擬似クラス 3 p:target 0 > 1 > 1
:lang擬似クラス 2 p:lang 0 > 1 > 1
:enabled擬似クラス 3 textarea:enabled 0 > 1 > 1
:disabled擬似クラス 3 textarea:disabled 0 > 1 > 1
:checked擬似クラス 3 input:checked 0 > 2 > 1
::first-line擬似要素 1 pre:first-line 0 > 0 > 1
::first-letter擬似要素 1 pre:first-letter 0 > 0 > 1
::before擬似要素 2 p:before 0 > 0 > 1
::after擬似要素 2 p:after 0 > 0 > 1
クラスセレクタ 1 li.first 0 > 1 > 1
IDセレクタ 1 div#content 1 > 0 > 1
:not擬似クラス 3 :not(a) 0 > 1 > 0
子孫セレクタ 1 ul li 0 > 0 > 2
子セレクタ 2 ul > li 0 > 0 > 2
隣接セレクタ 2 h1 + p 0 > 0 > 2
間接セレクタ 3 h1 ~ p 0 > 0 > 2

全称セレクタ

Universal selector

全ての要素を指定するためのセレクタです。

  • CSS
    * {}
  • HTML
    <p><a href="http://example.com/">example.com</a></p>

セレクタ一覧に戻る

型セレクタ

Type selector

特定の要素を指定するためのセレクタです。

  • CSS
    a {}
  • HTML
    <p><a href="http://example.com/">example.com</a></p>

セレクタ一覧に戻る

属性セレクタ

Attribute selectors

特定の属性・属性値がある要素を指定するためのセレクタです。

特定の属性がある要素

  • CSS
    a[target] {}
  • HTML
    <ul>
      <li><a href="http://example.com/">example.com</a></li>
      <li><a href="http://example.org/" target="_blank">example.org</a></li>
      <li><a href="http://example.net/" target="_blank">example.net</a></li>
    </ul>

特定の属性と属性値がある要素

  • CSS
    a[rel="follow"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/" rel="follow">example.com</a></li>
      <li><a href="http://example.org/" rel="follow external">example.org</a></li>
      <li><a href="http://example.net/" rel="nofollow external">example.net</a></li>
    </ul>

特定の属性と半角スペースで区切れる属性値がある要素

  • CSS
    a[rel~="follow"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/" rel="follow">example.com</a></li>
      <li><a href="http://example.org/" rel="follow external">example.org</a></li>
      <li><a href="http://example.net/" rel="nofollow external">example.net</a></li>
    </ul>

特定の属性と半角ハイフンで区切れる属性値がある要素

  • CSS
    a[lang|="en"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/" lang="ja">example.com</a></li>
      <li><a href="http://example.org/" lang="en">example.org</a></li>
      <li><a href="http://example.net/" lang="en-us">example.net</a></li>
    </ul>

特定の属性と特定の文字列で始まる属性値がある要素

  • CSS
    a[href^="http://"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/index.html">example.com</a></li>
      <li><a href="https://example.org/index.shtml">example.org</a></li>
      <li><a href="https://example.net/index.php">example.net</a></li>
    </ul>

特定の属性と特定の文字列で終わる属性値がある要素

  • CSS
    a[href$=".html"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/index.html">example.com</a></li>
      <li><a href="https://example.org/index.shtml">example.org</a></li>
      <li><a href="https://example.net/index.php">example.net</a></li>
    </ul>

特定の属性と特定の文字列を含む属性値がある要素

  • CSS
    a[href*=".com"] {}
  • HTML
    <ul>
      <li><a href="http://example.com/index.html">example.com</a></li>
      <li><a href="https://example.org/index.shtml">example.org</a></li>
      <li><a href="https://example.net/index.php">example.net</a></li>
    </ul>

セレクタ一覧に戻る

:root擬似クラス

:root pseudo class

ドキュメントのルート要素を指定するためのセレクタです。HTMLドキュメントのルート要素はhtml要素ですが、ルート要素が決まっていないXMLドキュメントでの使用が想定されます。

  • CSS
    :root {}
  • HTML
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <title>Lorem ipsum</title>
      </head>
      <body>
        <p>Lorem ipsum</p>
      </body>
    </html>

セレクタ一覧に戻る

:nth-child擬似クラス

:nth-child pseudo class

同じ親要素を持つ要素のうち、最初の要素からカウントして設定値とマッチする要素を指定するためのセレクタです。()内の設定値には整数, 奇数(odd), 偶数(even), カウント数(n), 加算(+), 減算(-)が使用できます。

  • CSS
    dl dt:nth-child(odd) {}
    dl dt:nth-child(2n+1) {}
    dl dt:nth-child(2n-1) {}
  • HTML
    <dl>
      <dt>count=1, dt=1</dt>
      <dd>count=2, dd=1</dd>
      <dt>count=3, dt=2</dt>
      <dd>count=4, dd=2</dd>
      <dd>count=5, dd=3</dd>
      <dt>count=6, dt=3</dt>
      <dt>count=7, dt=4</dt>
      <dd>count=8, dd=4</dd>
      <dt>count=9, dt=5</dt>
      <dd>count=10, dd=5</dd>
    </dl>

セレクタ一覧に戻る

:nth-last-child擬似クラス

:nth-last-child pseudo class

同じ親要素を持つ要素のうち、最後の要素からカウントして設定値とマッチする要素を指定するためのセレクタです。()内の設定値には整数, 奇数(odd), 偶数(even), カウント数(n), 加算(+), 減算(-)が使用できます。

  • CSS
    dl dt:nth-last-child(even) {}
    dl dt:nth-last-child(2n) {}
  • HTML
    <dl>
      <dt>count=10, dt=5</dt>
      <dd>count=9, dd=5</dd>
      <dt>count=8, dt=4</dt>
      <dd>count=7, dd=4</dd>
      <dd>count=6, dd=3</dd>
      <dt>count=5, dt=3</dt>
      <dt>count=4, dt=2</dt>
      <dd>count=3, dd=2</dd>
      <dt>count=2, dt=1</dt>
      <dd>count=1, dd=1</dd>
    </dl>

セレクタ一覧に戻る

:nth-of-type擬似クラス

:nth-of-type pseudo class

同じ親要素を持つ要素のうち、最初に出現する単一要素からカウントして設定値とマッチする要素を指定するためのセレクタです。()内の設定値には整数, 奇数(odd), 偶数(even), カウント数(n), 加算(+), 減算(-)が使用できます。

  • CSS
    dl dt:nth-of-type(odd) {}
    dl dt:nth-of-type(2n+1) {}
    dl dt:nth-of-type(2n-1) {}
  • HTML
    <dl>
      <dt>count=1, dt=1</dt>
      <dd>count=2, dd=1</dd>
      <dt>count=3, dt=2</dt>
      <dd>count=4, dd=2</dd>
      <dd>count=5, dd=3</dd>
      <dt>count=6, dt=3</dt>
      <dt>count=7, dt=4</dt>
      <dd>count=8, dd=4</dd>
      <dt>count=9, dt=5</dt>
      <dd>count=10, dd=5</dd>
    </dl>

セレクタ一覧に戻る

:nth-last-of-type擬似クラス

:nth-last-of-type pseudo class

同じ親要素を持つ要素のうち、最後に出現する単一要素からカウントして設定値とマッチする要素を指定するためのセレクタです。()内の設定値には整数, 奇数(odd), 偶数(even), カウント数(n), 加算(+), 減算(-)が使用できます。

  • CSS
    dl dt:nth-last-child(even) {}
    dl dt:nth-last-child(2n) {}
  • HTML
    <dl>
      <dt>count=10, dt=5</dt>
      <dd>count=9, dd=5</dd>
      <dt>count=8, dt=4</dt>
      <dd>count=7, dd=4</dd>
      <dd>count=6, dd=3</dd>
      <dt>count=5, dt=3</dt>
      <dt>count=4, dt=2</dt>
      <dd>count=3, dd=2</dd>
      <dt>count=2, dt=1</dt>
      <dd>count=1, dd=1</dd>
    </dl>

セレクタ一覧に戻る

:first-child擬似クラス

:first-child pseudo class

同じ親要素を持つ要素のうち、最初の要素を指定するためのセレクタです。

  • CSS
    ul :first-child {}
  • HTML
    <ul>
      <li>Lorem ipsum</li>
      <li>Ut enim</li>
      <li>Duis aute</li>
      <li>Excepteur sint</li>
    </ul>

セレクタ一覧に戻る

:last-child擬似クラス

:last-child pseudo class

同じ親要素を持つ要素のうち、最後の要素を指定するためのセレクタです。

  • CSS
    ul :last-child {}
  • HTML
    <ul>
      <li>Lorem ipsum</li>
      <li>Ut enim</li>
      <li>Duis aute</li>
      <li>Excepteur sint</li>
    </ul>

セレクタ一覧に戻る

:first-of-type擬似クラス

:first-of-type pseudo class

同じ親要素を持つ要素のうち、最初に出現する単一要素を指定するためのセレクタです。

  • CSS
    dl :first-of-type {}
  • HTML
    <dl>
      <dt>Lorem ipsum</dt>
      <dd>Lorem ipsum dolor sit amet...</dd>
      <dt>Ut enim</dt>
      <dd>Ut enim ad minim veniam...</dd>
    </div>

セレクタ一覧に戻る

:last-of-type擬似クラス

:last-of-type pseudo class

同じ親要素を持つ要素のうち、最後に出現する単一要素を指定するためのセレクタです。

  • CSS
    dl :last-of-type {}
  • HTML
    <dl>
      <dt>Lorem ipsum</dt>
      <dd>Lorem ipsum dolor sit amet...</dd>
      <dt>Ut enim</dt>
      <dd>Ut enim ad minim veniam...</dd>
    </div>

セレクタ一覧に戻る

:only-child擬似クラス

:only-child pseudo class

親要素に対する唯一の子要素を指定するためのセレクタです。

  • CSS
    p:only-child {}
  • HTML
    <div>
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div>
      <p>Ut enim ad minim veniam...</p>
      <p>Duis aute irure dolor in reprehenderit...</p>
    </div>
    <div>
      <p>Excepteur sint occaecat cupidatat non proident...</p>
    </div>

セレクタ一覧に戻る

:only-of-type擬似クラス

:only-of-type pseudo class

同じ親要素を持つ要素のうち、唯一の要素を指定するためのセレクタです。

  • CSS
    p:only-of-type {}
  • HTML
    <div>
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div>
      <p>Ut enim ad minim veniam...</p>
      <p>Duis aute irure dolor in reprehenderit...</p>
    </div>
    <div>
      <p>Excepteur sint occaecat cupidatat non proident...</p>
    </div>

セレクタ一覧に戻る

:empty擬似クラス

:empty pseudo class

要素内が空の要素を指定するためのセレクタです。

  • CSS
    div:empty {}
  • HTML
    <div></div>
    <div>
      <p>content</p>
    </div>
    <div>
      <script>document.write('');</script>
    </div>
    <div>
      <script>document.write('<p>content</p>');</script>
    </div>

セレクタ一覧に戻る

:visited擬似クラス

:visited pseudo class

訪問済みのリンクを指定するためのセレクタです。

  • CSS
    a:link {}
  • HTML
    <ul>
      <li><a href="http://example.com/">未訪問のリンク</a></li>
      <li><a href="http://example.org/">訪問済みのリンク</a></li>
    </ul>

セレクタ一覧に戻る

:active擬似クラス

:active pseudo class

ユーザーが要素をクリックしてから離すまでを指定するためのセレクタです。

  • CSS
    button:active {}
  • HTML
    <ul>
      <li><button type="submit" name="submit">クリックされているボタン</button></li>
      <li><button type="reset" name="reset">クリックされていないボタン</button></li>
    </ul>

セレクタ一覧に戻る

:hover擬似クラス

:hover pseudo class

ユーザーが要素上にポインタを置いたときを指定するためのセレクタです。

  • CSS
    button:hover {}
  • HTML
    <ul>
      <li><button type="submit" name="submit">ポインタが重なっているボタン</button></li>
      <li><button type="reset" name="reset">ポインタが重なっていないボタン</button></li>
    </ul>

セレクタ一覧に戻る

:focus擬似クラス

:focus pseudo class

ユーザーが要素にフォーカスしたとき(Tabキーでの要素間移動や、input要素・textarea要素が入力状態のとき)を指定するためのセレクタです。

  • CSS
    textarea:focus {}
  • HTML
    <dl>
      <dt>テキストエリア1</dt>
      <dd><textarea name="テキストエリア1" cols="80" rows="20">フォーカスされている</textarea></dd>
      <dt>テキストエリア2</dt>
      <dd><textarea name="テキストエリア2" cols="80" rows="20">フォーカスされていない</textarea></dd>
    </dl>

セレクタ一覧に戻る

:target擬似クラス

:target pseudo class

URLにアンカー(#~)が含まれる場合に、対応するid属性を持つ要素を指定するためのセレクタです。

  • CSS
    h1:target {}
  • HTML
    <h1 id="section1">URLに#section1が含まれている</h1>
    <h1 id="section1">URLに#section1が含まれていない</h1>

セレクタ一覧に戻る

:lang擬似クラス

:lang pseudo class

lang属性と特定の属性値を持つ要素を指定するためのセレクタです。属性値がハイフン(-)で区切られている場合は前方一致で対象になります。

  • CSS
    p:lang(en) {}
  • HTML
    <p lang="ja">Lorem ipsum dolor sit amet...</p>
    <p lang="en">Lorem ipsum dolor sit amet...</p>
    <p lang="en-us">Lorem ipsum dolor sit amet...</p>

セレクタ一覧に戻る

:enabled擬似クラス

:enabled pseudo class

input要素・select要素・textarea要素等が有効になっている場合に適用されるセレクタです。

  • CSS
    textarea:enabled {}
  • HTML
    <dl>
      <dt>テキストエリア1</dt>
      <dd><textarea name="テキストエリア1" cols="80" rows="20"></textarea></dd>
      <dt>テキストエリア2</dt>
      <dd><textarea name="テキストエリア2" cols="80" rows="20" disabled="disabled"></textarea></dd>
    </dl>

セレクタ一覧に戻る

:disabled擬似クラス

:disabled pseudo class

input要素・select要素・textarea要素等が無効になっている場合に適用されるセレクタです。

  • CSS
    textarea:disabled {}
  • HTML
    <dl>
      <dt>テキストエリア1</dt>
      <dd><textarea name="テキストエリア1" cols="80" rows="20"></textarea></dd>
      <dt>テキストエリア2</dt>
      <dd><textarea name="テキストエリア2" cols="80" rows="20" disabled="disabled"></textarea></dd>
    </dl>

セレクタ一覧に戻る

:checked擬似クラス

:checked pseudo class

チェックボックス・ラジオボタンが選択されている場合に適用されるセレクタです。

  • CSS
    input:checked {}
  • HTML
    <dl>
      <dt>チェックボックス</dt>
      <dd><input type="checkbox" name="checkbox" value="チェックボックス1" checked="checked" id="チェックボックス1" /><label for="チェックボックス1">チェックボックス1</label></dd>
      <dd><input type="checkbox" name="checkbox" value="チェックボックス2" id="チェックボックス2" /><label for="チェックボックス2">チェックボックス2</label></dd>
      <dt>ラジオボタン</dt>
      <dd><input type="radio" name="radio" value="ラジオボタン1" checked="checked" id="ラジオボタン1" /><label for="ラジオボタン1">ラジオボタン1</label></dd>
      <dd><input type="radio" name="radio" value="ラジオボタン2" id="ラジオボタン2" /><label for="ラジオボタン2">ラジオボタン2</label></dd>
    </dl>

セレクタ一覧に戻る

::first-line擬似要素

::first-line pseudo element

特定の要素内の一行目を指定するためのセレクタです。

  • CSS
    pre::first-line {}
  • HTML
    <pre><pre::first-line>Lorem ipsum dolor sit amet,</pre::first-line>
    consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>

セレクタ一覧に戻る

::first-letter擬似要素

::first-letter pseudo element

特定の要素内の一文字目を指定するためのセレクタです。

  • CSS
    pre::first-letter {}
  • HTML
    <pre><pre::first-line>L</pre::first-line>orem ipsum dolor sit amet,
    consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>

セレクタ一覧に戻る

::before擬似要素

::before pseudo element

特定の要素内の最初に擬似要素を生成するためのセレクタです。

  • CSS
    p::before {
      content: "content";
    }
  • HTML
    <p><p::before>content</p::before>Lorem ipsum</p>

セレクタ一覧に戻る

::after擬似要素

::after pseudo element

特定の要素内の最後に擬似要素を生成するためのセレクタです。

  • CSS
    p::after {
      content: "content";
    }
  • HTML
    <p>Lorem ipsum<p::after>content</p::after></p>

セレクタ一覧に戻る

クラスセレクタ

Class selectors

特定のclass属性値を持つ要素を指定するためのセレクタです。

  • CSS
    li.first {}
  • HTML
    <ul>
      <li class="first">Lorem ipsum
        <ul>
          <li class="first last">Ut enim</li>
        </ul>
      </li>
      <li class="last">Ut enim</li>
    </ul>

セレクタ一覧に戻る

IDセレクタ

ID selectors

特定のid属性値を持つ要素を指定するためのセレクタです。

  • CSS
    div#content {}
  • HTML
    <div id="content">
      <div id="head"></div>
      <div id="body"></div>
      <div id="foot"></div>
    </div>

セレクタ一覧に戻る

:not擬似クラス

:not pseudo class

特定の要素以外を指定するためのセレクタです。()内の設定値には型セレクタ, 属性セレクタ, クラスセレクタ, IDセレクタが使用できます。

  • CSS
    :not(a) {}
  • HTML
    <ul>
      <li><a href="http://example.com/">example.com</a></li>
      <li><a href="http://example.org/">example.org</a></li>
      <li><a href="http://example.net/">example.net</a></li>
    </ul>

セレクタ一覧に戻る

子孫セレクタ

Descendant selectors

特定の要素の子孫要素を指定するためのセレクタです。要素を半角スペースで区切ります。

  • CSS
    ul li {}
  • HTML
    <ul>
      <li>Lorem ipsum
        <ol>
          <li>Ut enim</li>
          <li>Duis aute</li>
          <li>Excepteur sint</li>
        </ol>
      </li>
      <li>Ut enim</li>
    </ul>

セレクタ一覧に戻る

子セレクタ

Child selectors

特定の要素の子要素を指定するためのセレクタです。要素を > で区切ります。

  • CSS
    ul > li {}
  • HTML
    <ul>
      <li>Lorem ipsum
        <ol>
          <li>Ut enim</li>
          <li>Duis aute</li>
          <li>Excepteur sint</li>
        </ol>
      </li>
      <li>Ut enim</li>
    </ul>

セレクタ一覧に戻る

隣接セレクタ

Adjacent sibling selectors

特定の要素の隣接要素を指定するためのセレクタです。要素を + で区切ります。

  • CSS
    h1 + p {}
  • HTML
    <div>
      <h1>Lorem ipsum</h1>
      <p>Ut enim</p>
      <p>Duis aute</p>
      <div>
        <p>Excepteur sint</p>
      </div>
    </div>

セレクタ一覧に戻る

間接セレクタ

General sibling selectors

特定の要素と同じ親要素を持つ要素を指定するためのセレクタです。要素を ~ で区切ります。

  • CSS
    h1 ~ p {}
  • HTML
    <div>
      <h1>Lorem ipsum</h1>
      <p>Ut enim</p>
      <p>Duis aute</p>
      <div>
        <p>Excepteur sint</p>
      </div>
    </div>

セレクタ一覧に戻る