CSSセレクタ一覧

CSS2.1のセレクタ一覧です。プロパティが適用される優先順位の低いセレクタから高いセレクタの順序で一覧にしてあります。

優先順位は下表の詳細度（IDが多いセレクタ > IDが少ないセレクタ > 属性・クラスが多いセレクタ > 属性・クラスが少ないセレクタ > 要素が多いセレクタ > 要素が少ないセレクタ）から算出されます。

	セレクタの一例	詳細度
	セレクタの一例	ID	属性・クラス	要素
全称セレクタ	`*`	0	0	0
型セレクタ	`a`	0	0	1
子孫セレクタ	`ul li`	0	0	2
子セレクタ	`ul > li`	0	0	2
隣接兄弟セレクタ	`h1 + p`	0	0	2
擬似要素	`p:first-letter`	0	0	2
属性セレクタ	`a[href]`	0	1	1
クラスセレクタ	`div.group`	0	1	1
:first-child擬似クラス	`h1:first-child`	0	1	1
:lang擬似クラス	`p:lang`	0	1	1
リンク擬似クラス	`a:link`	0	1	1
動的擬似クラス	`a:hover`	0	1	1
IDセレクタ	`div#container`	1	0	1

全称セレクタ

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

CSSサンプル

/* 全ての要素 */
* {
  プロパティ: 値;
}
/* dd要素の中の全ての要素（全称セレクタと子孫セレクタで前の設定を上書き） */

dd * {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

型セレクタ

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

CSSサンプル

/* a要素 */
a {
  プロパティ: 値;
}
/* span要素 */

span {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

子孫セレクタ

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

CSSサンプル

/* dt要素の中のa要素 */
dt a {
  プロパティ: 値;
}
/* dd要素の中のa要素 */

dd a {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

子セレクタ

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

CSSサンプル

/* dt要素の子のa要素 */
dt > a {
  プロパティ: 値;
}
/* dd要素の子のa要素 */

dd > a {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

隣接兄弟セレクタ

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

CSSサンプル

/* 何等かの要素に隣接する何等かの要素 */
* + * {
  プロパティ: 値;
}
/* li要素に隣接するli要素 */

li + li {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

擬似要素

:first-line擬似要素 & :first-letter擬似要素 & :before擬似要素 & :after擬似要素

:first-line疑似要素は特定の要素内の一行目、:first-letter疑似要素は特定の要素内の一文字目を指定するためのセレクタです。

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

CSSサンプル

/* dt要素内の一行目 */
dt:first-line {
  プロパティ: 値;
}
/* dd要素内とli要素内の一文字目 */

dd:first-letter,

li:first-letter {

  プロパティ: 値;

}
/* dt要素とdd要素の最初と最後に文字列のcontentを生成 */

dt:before,

dt:after,

dd:before,

dd:after {

  content: "content";

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
<first-line>
<before>content</before><a href="http://www.iana.org/" class="first line">IANA</a>
</first-line>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span><after>content</after>
  </dt>
  <dd lang="en" id="iana-example-domains">
<before>content</before><a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
<after>content</after>
  </dd>
</dl>

属性セレクタ

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

CSSサンプル

/* href属性があるa要素 */
a[href] {
  プロパティ: 値;
}
/* href属性があり、値がhttp://www.iana.org/のa要素 */

a[href="http://www.iana.org/"] {

  プロパティ: 値;

}
/* class属性があり、半角スペースで区切れる値にsecondを含む何等かの要素 */

*[class~="second"] {

  プロパティ: 値;

}
/* lang属性があり、半角ハイフンで区切れる値にenを含む何等かの要素 */

*[lang|="en"] {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

クラスセレクタ

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

CSSサンプル

/* class属性にfirstが指定された何等かの要素 */
*.first {
  プロパティ: 値;
}
/* class属性にsecondとlineが指定された何等かの要素 */

*.second.line {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

:first-child擬似クラス

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

CSSサンプル

/* 最初の何等かの要素 */
*:first-child {
  プロパティ: 値;
}
/* 3番目のli要素（隣接セレクタと組み合わせて3番目を特定） */

*:first-child + * + li {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

:lang擬似クラス

特定の言語設定を持つ要素を指定するためのセレクタです。lang属性が指定された要素とその影響下にある子孫要素が対象になります。

CSSサンプル

/* lang属性の値がen-usの何等かの要素 */
*:lang(en-us) {
  プロパティ: 値;
}
/* lang属性の値がenの何等かの要素 */

*:lang(en) {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt lang="en-us" id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd lang="en" id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>

リンク擬似クラス

:link擬似クラス & :visited擬似クラス

:link擬似クラスは未訪問、:visited擬似クラスは訪問済みのハイパーリンク（href属性を持つa要素）を指定するためのセレクタです。

リンク擬似クラスと共に動的擬似クラス（:hover擬似クラス, :active擬似クラス）をハイパーリンクに指定する場合は、リンク擬似クラスを動的擬似クラスより先に記述する必要があります。:link, :visited, :hover, :active の順番で記述するのが一般的です。

CSSサンプル

/* 未訪問のa要素は文字色を青 */
a:link {
  color: blue;
}
/* 訪問済みのa要素は文字色を紫 */

a:visited {

  color: purple;

}
/* カーソルと重なったa要素の文字色を赤 */

a:hover {

  color: red;

}
/* 選択されたa要素の文字色を緑 */

a:active {

  color: green;

}

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>

動的擬似クラス

:hover擬似クラス & :active擬似クラス & :focus擬似クラス

:hover擬似クラスはカーソルと重なった要素、:active擬似クラスは選択された要素、:focus擬似クラスは選択状態にある要素を指定するためのセレクタです。

CSSサンプル

/* カーソルがinput要素と重なったらボーダー色を黒 */
input[type=text]:hover,
input[type=button]:hover {
  border-color: black;
}
/* input[type=text]要素が選択状態になったらボーダー色を黒で背景色を白 */

input[type=text]:focus {

  border-color: black;

  background: white;

}
/* input[type=button]要素が選択されたらボーダー色・背景色を黒 */

input[type=button]:active {

  border-color: black;

  background: black;

}

HTMLサンプル

<p>
  <input type="text" value="text" />
  <input type="button" value="button" />
</p>

input[type=text]要素のhover,focus時とinput[type=button]要素のhover,active時の画像

IDセレクタ

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

CSSサンプル

/* id属性にianaが指定されたdt要素 */
dt#iana {
  プロパティ: 値;
}
/* id属性にiana-example-domainsが指定されたdd要素 */

dd#iana-example-domains {

  プロパティ: 値;

}

HTMLサンプル

<dl>
  <dt id="iana">
    <a href="http://www.iana.org/" class="first line">IANA</a>
    <br>
    <span class="second line">Internet Assigned Numbers Authority</span>
  </dt>
  <dd id="iana-example-domains">
    <a href="http://www.iana.org/domains/example/">Example Domains</a>
    <ul>
      <li class="first"><a href="http://example.com/">example.com</a></li>
      <li class="second"><a href="http://example.org/">example.org</a></li>
      <li class="third"><a href="http://example.net/">example.net</a></li>
    </ul>
  </dd>
</dl>