CSSで指定できるセレクタ-CSS-

指定できるセレクタ

CSSを定義するセレクタには多くの種類がありますので一覧形式でご紹介します。

単体セレクタとセレクタの組み合わせ

基本的なセレクタと、複数のセレクタの組合せの種類は以下表となります。

タイプセレクタ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名 { } 要素1つ
body
{ background-color: green; }
body要素の背景色にgreenを指定

セレクタの組合せ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
親要素名 子要素名 { } ある親要素の中に含まれる子要素(子孫要素も含む)
strong strong
{ color: red; }
strong要素の子要素(子孫要素)であるstrong要素の文字色をredに指定
親要素名 > 子要素名 { } ある親要素の中に含まれる直接の子要素(子孫要素含まず)
body > p
{ backgrond-color: red; }
body要素の直接の子要素であるp要素の背景色をredに指定
要素名1 + 要素名2 { } ある要素の直後にある(隣接する)要素
h1 + h3
{ margin-top: -1em; }
h1要素の直後にあるh3要素のみ、上側のマージンを-1emに指定
要素名1 ~ 要素名2 { } ある要素の後ろにある(隣接以外も含む)要素
h1 ~ h3
{ color: blue; }
h1要素の後ろにあるh3要素の文字色をblueに指定

セレクタのグループ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
セレクタ, セレクタ, ・・・・・, セレクタ { } 複数のセレクタ
h1, h2, h3
{ background-color: blue; }
h1、h2、h3要素すべての背景色をblueに指定

ユニバーサルセレクタ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
* { } すべての要素
*
{ margin: 0; }
全ての要素のマージンを0に指定

class(クラス)セレクタ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名.クラス名 { } class属性の値が「クラス名」の要素
p.memo
{ border: solid 1px; }
class属性の値がmemoであるp要素に1pxの実線を引く

id(アイディ)セレクタ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名#id名 { } id属性の値が「id名」の要素
div#box1
{ width: 150px; }
id属性の値がbox1であるdiv要素の幅を150pxに指定

属性セレクタ

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名[ 属性名 ] { } 「属性名」の属性を持つ要素
h1[title]
{ color: red; }
title属性を持つh1要素の文字色をredに指定
要素名[ 属性名 = “値” ] { } 「属性名」の属性が特定の「値」を持つ要素
h1[title=”meeting”]
{ color: red; }
title属性の値が「meeting」に一致するh1要素の文字色をredに指定
要素名[ 属性名 ~= “値” ] { } 「属性名」の属性がスペース区切りの複数の値の中で特定の「値」を持つ要素
td[headers~=”goal1″]
{ color: red; }
headers属性が1つ以上の値を持つtd要素で、値の1つが「goal1」である場合に文字色をredに指定
要素名[ 属性名 ^= “値の文字列” ] { } 「属性名」の属性の値が「値の文字列」から始まる要素
object[type^=”image/”]
{ width: 100px; }
type属性の値が「image/」から始まるobject要素の項目幅を100pxに指定
要素名[ 属性名 $= “値の文字列” ] { } 「属性名」の属性の値が「値の文字列」で終わる要素
a[href$=”.html”]
{ font-weight: bold; }
href属性の値が「.html」で終わるa要素の文字を太く表示
要素名[ 属性名 *= “値の文字列” ] { } 「属性名」の属性の値の中に「値の文字列」が含まれる要素
td[headers*=”goal”]
{ color: red; }
headers属性の値の中に「goal」の文字列が含まれるすべてのtd要素の文字色をredに指定
要素名[ 属性名 |= “値” ] { } 「属性名」の属性がハイフンの区切りの値を持ち、その値が「値の文字列」から始まる要素
a[hreflag|=”zh”]
{ font-weight: bold; }
hreflag属性の値が「zh」や「zh-Hant」であるa要素の文字を太く表示

疑似クラス

特定の状態や属性値をもつ要素を「疑似クラス」としてセレクタに指定できます。

リンク疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
a:link { } 未訪問のリンクを示すa要素
a:link
{ color: green; }
未訪問のリンクを示すa要素の文字色にgreenを指定
a:visited { } 訪問済みのリンクを示すa要素
a:visited
{ color: red; }
訪問済みのリンクを示すa要素の文字色にredを指定

ユーザーアクション疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名:hover { } マウスポインタが上にある状態の要素
h1:hover
{ background-color: pink; }
ユーザーがh1要素にマウスポインタを合わせたときのh1要素の背景色をpinkに指定
要素名:active { } マウスのボタンが押された状態にある要素
a:active
{ font-weight: bold; }
ユーザーがa要素のリンクをクリックしたときに文字を太字にする
要素名:focus { } 項目が選択された(フォーカス)状態にある要素
input[type=”text”]:focus
{ background-color: yellow; }
type属性が「text」の値を持つinput要素の項目が選択されたときに項目の背景色をyellowにする

ターゲット疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名:target { } 「#」を付けたリンク先(ターゲット)である要素
*:target
{ color: red; }
「#」を付けたページ内項目のリンク先(idを持つターゲット)であるすべての要素の文字色をredに指定

言語の疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名:lang(言語タグ名) { } 「言語タグ名」の言語で記述された要素
span:lang(de)
{ font-style: italic; }
言語タグが「de」のspan要素の文字を斜体で表示

UI状態を示す疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名:enabled { } 項目をユーザーが使用できる(disabled属性が指定されていない)要素
input[type=”radio”]:enabled + label
{ font-weight: bold; }
disable属性が無効でtype属性が「radio」の値を持つinput要素(ラジオボタン)に隣接するlabel要素の文字を太字に指定
要素名:disabled { } 項目をユーザーが使用できない(disabled属性が指定された)要素
input[type=”radio”]:disabled + label
{ color: silver; }
disable属性が有効でtype属性が「radio」の値を持つinput要素(ラジオボタン)に隣接するlabel要素の文字色をsilverに指定
要素名:checked { } ラジオボタンやチェックボックスの項目が選択済みの(checked属性が有効の)要素
input[type=”checkbox”]:checked + label
{ color: purple; }
(ユーザーの選択などにより)checked属性が有効でtype属性が「checkbox」の値を持つinput要素(チェックボックス)に隣接するlabel要素の文字色をpurpleに指定

構造的疑似クラス

構造的疑似クラスでは「an+b」などの形式の変数でセレクタを指定できます。

構造的疑似クラス

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
:root { } ドキュメントのルートである要素(HTMLドキュメントの場合はhtml要素)
:root
{ color: green; }
ドキュメントの文字色をgreenに指定
子要素名:nth-child(an+b) { } ある親要素内で隣接する子要素のうちan+b番目
tr:nth-child(2n)
{ background-color: pink; }
表の行(tr要素)のうち、偶数番目(2n行)の背景色をpinkに指定
子要素名:first-child { } ある親要素の最初の子要素である要素【:nth-child(1)と同じ】
ul li:first-child
{ font-weight: bold; }
ul要素の子要素であるli要素のうち最初の項目の文字のみ太字に指定
子要素名:nth-last-child(an+b) { } ある親要素内で隣接する子要素のうち後ろからan+b番目
tr:nth-last-child(2)
{ background-color: pink; }
表の行(tr要素)のうち、下から2番目の行の背景色をpinkに指定
子要素名:last-child { } ある親要素の最後の子要素である要素【nth-last-child(1)と同じ】
ol > li:last-child
{ font-style: italic; }
ol要素の子要素であるli要素のうち最後の項目の文字のみ斜体に指定
子要素名:nth-of-type(an+b) { } ある親要素内でそのタイプの子要素(隣接に限らない)のうちan+b番目
h1:nth-of-type(2n+1)
{ background-color: blue; }
h1要素のうち、奇数番目(2n+1)の項目の背景色をblueに指定
要素名:nth-last-of-type(an+b) { } ある親要素内でそのタイプの子要素(隣接に限らない)のうち後ろからan+b番目
dt:nth-last-of-type(even)
{ background-color: green; }
dt要素のうち後ろから偶数番目(even)の背景色をgreenに指定
子要素名:first-of-type { } ある親要素内でそのタイプの最初の子要素である要素【:nth-of-type(1)と同じ】
img:first-of-type
{ float: right; }
親要素内で最初に現れるimg要素のみ右へ配置
子要素名:last-of-type { } ある親要素内でそのタイプの最後の子要素である要素【:nth-last-of-type(1)と同じ】
tr > td:last-of-type
{ background-color: pink; }
表の行(tr要素)の最後のセル(td要素)のみ、背景色をpinkに指定
子要素名:only-child { } ある親要素内でただ1つの子要素である要素
tr:only-child
{ background-color: pink; }
表の行(tr要素)が親要素内で1つのみの場合に、背景色をpinkに指定
子要素名:only-of-type { } ある親要素内でそのタイプのただ1つの子要素である要素
section > p:only-of-type
{ border: solid 1px; }
section要素内でp要素が1つののみの場合に実線で囲む
要素名:empty { } テキストも含め子要素を1つも持たない要素
td:empty{ border: solid 1px; }
td要素が空(<td></td>)の場合にセル実線で囲む
要素名:not(セレクタ) { } 指定したセレクタ(疑似要素と否定の疑似クラス自身は除く)を含まない要素
td:not(:empty)
{ background-color: pink; }
td要素のうち、空でない(:empty疑似クラスではない)項目の背景色をpinkに指定

疑似要素

疑似要素では要素内の特定の文字や語句スタイルなど、ほかの方法でスタイルと指定できない情報を指定します。

セレクタ
(指定方法)
対象物
指定例
例の説明
関連記事
要素名::first-line { } 要素コンテンツの第1行目
p::first-line
{ text-transform: uppercase; }
p要素の最初の行のアルファベット文字をすべて大文字で表示
要素名::first-letter { } 要素のコンテンツの第1文字目
p::first-letter
{ font-size: 300%; }
p要素の最初の文字のみ3倍に表示
要素名::before { } 要素のコンテンツの前
h3::before
{ content: “■”; }
h3要素の見出しの前に「■」の文字を入れる
要素名::after { } 要素のコンテンツの後
p::after
{ content: url(“flower.png”); }
p要素の後ろにURLが「flower.png」の画像を挿入する

CSSの基本関連記事