REDLINE MAGAZINE | CSS セレクタ総復習 （2010年5月版）

CSS セレクタ総復習 （2010年5月版）

CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。

Selectors Level 3 http://www.w3.org/TR/css3-selectors/
選択子 http://zng.info/specs/css3-selectors.html　(日本語訳)

※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。

---

目次

• *　(汎用選択子)
• E　(型選択子)
• E[foo] (属性選択子)
• E[foo="bar"] (属性選択子)
• E[foo~="bar"] (属性選択子)
• E[foo^="bar"] (属性選択子)
• E[foo$="bar"] (属性選択子)
• E[foo*="bar"] (属性選択子)
• E[foo|="en"]/E[hreflang|="en"] (属性選択子)
• E:root (構造擬似クラス)
• E:nth-child(n) (構造擬似クラス)
• E:nth-last-child(n) (構造擬似クラス)
• E:nth-of-type(n) (構造擬似クラス)
• E:nth-last-of-type(n) (構造擬似クラス)
• E:first-child (構造擬似クラス)
• E:last-child (構造擬似クラス)
• E:first-of-type (構造擬似クラス)
• E:last-of-type (構造擬似クラス)
• E:only-child (構造擬似クラス)
• E:only-of-type (構造擬似クラス)
• E:empty (構造擬似クラス)
• E:link / E:visited (リンク擬似クラス)
• E:active / E:hover / E:focus (利用者行為擬似クラス)
• E:target (ターゲット擬似クラス)
• E:lang(fr) (lang()擬似クラス)
• E:enabled / E:disabled (UI要素の状態擬似クラス)
• E:checked (E:indeterminate) (UI要素の状態擬似クラス)
• E::first-line (:first- line擬似要素)
• E::first-letter (:first- letter擬似要素)
• E::before (:before擬似要素)
• E::after (:after擬似要素)
• E.warning (クラス選択子)
• E#myid (ID選択子)
• E:not(s) (打消しの擬似クラス)
• E F (子孫結合子)
• E > F (子結合子)
• E + F (直接隣接結合子)
• E ~ F (間接隣接結合子)

---

*　(汎用選択子)

意味

すべての要素に一致する

最初に定義されたCSS水準

CSS2

「全称セレクタ」「ユニバーサルセレクタ」とも呼ばれる。仕様書の和訳では「汎用選択子」。

「すべての要素に一致する」わけなので、そんなに出現頻度は高くない(はず)。少し前はCSSの頭で一旦ブラウザのデフォルトスタイル（主に margin や padding等）をリセットする目的で使われてるケースも多かった。が、その後の業界の流れでは「*」じゃなくて、各要素ごとに考えてリセットした方がよくね？的な感じになってる気がする。（別に「*」を利用してリセットするのが間違ってるわけではないけど、弊害もあるので）スタイル初期化については前に気になった初期化CSSというエントリを書いたのでそちらもよろしければどうぞ。

使い方・使い道について

上に書いたリセット用に使うっていう以外に、こんな使い方もいいかも、な話。ページの本コンテンツ部分では常にいくつかの要素の後はマージンやらなんやら入れて見た目を調節してるけど、例外的にこの部分だけマージンを0にしたい！というような場合。例えばそれがformの中だけは各要素のマージンをなくしたいという事であったらとしたら、

form * { margin:0; }

同じ例の延長で、formの中だけはどの要素についても上下マージンを統一したいなんて場合は、

form * { margin:10px auto; }

とか。個別に継承を調節した方がいいケースもあるので、常にこの方法を使うと逆に面倒だという場合もあるけれど、一括で指定したい場合は楽。

>>サンプルページを確認

その他、CSSハックで使う事もあるけど今回の主旨とは違うのでそこはスルー。

---

E　(型選択子)

意味

型Eの要素に一致する

最初に定義されたCSS水準

CSS1

一番単純なセレクタ。ページ内にあるE要素全てに一致。

使い方・使い道について

多分これはCSSで一番最初に覚えるやつなので、詳しい説明は省きます。

p { color:#333; font-size:1em; }

---

E[foo] (属性選択子)

意味

"foo"属性を持つE要素に一致する

最初に定義されたCSS水準

CSS2

属性の「値」は何でもいい。とにかく指定した属性を持ってるE要素ってこと。ちなみに見出し部分には「属性選択子」と書いているのですが、所謂「属性セレクタ」ってやつです。

属性選択子(属性セレクタ)全てに当てはまる事だけれど、[foo]とか下記に出てくる[foo="bar"]などの部分は重ねて指定してもＯＫ。

使い方・使い道について

a要素にtarget属性を持ってるものだけに背景色を指定する例。

a[target] { background:#fcc; }

属性を組み合わせたい場合なんかは以下のような書き方をする。

a[target][title] {background:#cfc;}

>>サンプルページを確認

---

E[foo="bar"] (属性選択子)

意味

"foo"属性の値が厳密に"bar"と等しいE要素に一致する

最初に定義されたCSS水準

CSS2

属性と値が完璧にマッチしてるE要素に適応される。どっちかが合ってても、もう一方が合ってなかったら適応外。属性と値の組み合わせを細かく指定することが出来る。

使い方・使い道について

例えばform内のinput要素で1行テキストボックスにだけwidth:300pxを適応させたい場合はこんな感じ。

input[type="text"] {width: 300px;}

ページの上部へ戻るリンクなんかで、a要素のtitle属性に"ページの先頭へ"という値を含むもののだけ背景色を付けたいという場合はこんな感じ。

a[title="ページの先頭へ"] {background:#fcc;}

今、背景色をつけたリンクでhover時には背景色を変えたいとかいう場合には

a[title="ページの先頭へ"]:hover {background:#f00;}

と、こんな感じになる。

>>サンプルページを確認

自分がこのセレクタを一番最初に実務で使った箇所はフォーム部品の周りの調整だった気がする。チェックボックスやラジオボタン横のマージンとりたいとか、そういうの。IE6では効かないんだけど、元々IE6はそれらのフォーム部品の周りに余白を勝手に取りよるから別に問題ないかーみたいなノリで恐る恐る利用したのも今となってはいい思い出。

このブログみたいに別窓リンクを開くのにJS使わずに、target使ってるサイトで（今時…な感じは否めない）別窓開くリンクの横にアイコン置きたい場合

a[target="_blank"]{
	background:url(hoge.png) no-repeat right center;
	padding:0 20px 0 0;
	}

とか、後付で何かいじるのも属性セレクタを使えば楽。IE6ではCSSだけじゃ無理だけど、なくても困らないものは気にしない！・・・といいつつもIE6は未だにシェアが下がらないのでclass付けて同じことするか、JSさんに頼るかという手順を踏んだりしてるんですけどね！早くその無駄なclass付けから開放されたいですね！

---

E[foo~="bar"] (属性選択子)

意味

"foo"属性の値がスペースで区切った値のリストであり、その一つが厳密に"bar"と等しいE要素に一致する

最初に定義されたCSS水準

CSS2

要素の属性の値がスペース区切りで複数ある場合、その中の1つと完全にマッチした場合に適応される。といっても、値が複数なくてはいけないわけではなく、値が1つでも適応される。それだと1つ上のE[foo="bar"]と何が違うんよって話になるけど、E[foo="bar"]の場合は値が複数の場合は例えその中に一致する値があっても複数の値が空白区切りで入ってたら適応されない。（値の中身が完全にそれとまったく同じでないと適応されない）E[foo="bar"]は完全一致、E[foo~="bar"]は「値単位での部分一致」ＯＫみたいな感じ。

ならば全部E[foo~="bar"]で書けばいいやんという気にならないでもないんだけれど、使い分けとしては、値が1つしかないものに関してはE[foo="bar"] 、複数あるものでその中の1つにでも一致したものを選択したい場合はE[foo~="bar"] を使うといいよってことなのかも。

使い方・使い道について

classの複数付けの1つにマッチさせたい場合。

p[class~="sampleB"] {background:#fcc;}

classの組み合わせでマッチさせたい場合。

p[class~="sampleB"][class~="sampleC"] {background:#cfc;}

>>サンプルページを確認

上記サンプルページのようにclass属性に限らず、こうやって組み合わせで属性と値を組み合わせて該当部分をピンポイントで抽出できるのって超便利。後から変更になったとか追加になったとか、そういう状況の時に手間かけずにこの組み合わせの指定いれるだけで解決したわって事もあった。（IE6は無視で）

---

E[foo^="bar"] (属性選択子)

意味

"foo"属性の値が厳密に文字列"bar"から始まるE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値が指定した文字列で始まっていれば適応される。前方一致というやつ。

使い方・使い道について

このセレクタの使用例としてよくhttp://から始まるリンクにアイコンをつける方法が解説サイトなんかでよく書かれているので、ちょっと違う事します。
mailtoでメールを送るようなリンクにメールアイコンを表示させたい場合は

a[href^="mailto:"]{
	background:url(../hoge/letter.png) no-repeat right center;
	padding:0 20px 0 0;
	}

こんな感じ。http://から始まる…の例とほとんど変わらないですね。ごめんなさい。もうちょっと違う事します。

例えば商品を紹介しているページで、p要素の中にimg要素を入れて商品写真を掲載しているページがあったと仮定して、その写真が新製品である場合のみ、周りを他の商品と違う色のボーダーで囲みたいよーというケースでこんなんはどうでしょーか。新製品の場合はp要素のtitle属性に【新商品：なんたらかんたら】のように必ず「【新製品」というのを頭に入れておくと、自動的にその新商品のボーダーだけ新商品用の色を指定できる、みたいな例。

p[title^="【新商品"] img{
	border:2px solid #630; /* 茶色のボーダー */
	padding:5px;
	} 

>>サンプルページを確認

「新商品：」という部分の文字列を削除するだけで他の商品と同じボーダーカラーになる、みたいな。

---

E[foo$="bar"] (属性選択子)

意味

"foo"属性の値が厳密に文字列"bar"で終わるE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値が指定した文字列で終わっていれば適応される。後方一致というやつ。

使い方・使い道について

このセレクタの使い方としてはだいたいリンク先のファイルの拡張子を判別して別のアイコンをつける（リンク先がpdfファイルならPDFファイルのアイコンを表示させるとか）パターンが紹介されてるので、その書き方。

a[href$=".pdf"] {
  background:url(../hoge/letter.png) no-repeat right center;
  padding:0 20px 0 0;
	}

>>サンプルページを確認

---

E[foo*="bar"] (属性選択子)

意味

"foo"属性の値が部分文字列"bar"を含むE要素に一致する

最初に定義されたCSS水準

CSS3

属性の値の中で指定した文字列が含まれる場合に適応される。部分一致。

使い方・使い道について

例えばサイトの更新情報を表示しているリスト部分でリンク先によって違うアイコンを表示しているようなケースを想定。私は実務では今それぞれにclassを振ってアイコンを変えている。でもこのセレクタを利用すれば、いちいちclassを割り振りしなくても、a要素のhref属性の値の文字列からディレクトリ部分を一致させて、それぞれに違うスタイルを割り振ることができる。

a[href*="categoryA"],
a[href*="categoryB"],
a[href*="categoryC"]{
	padding:0 0 0 65px;
	}
a[href*="categoryA"]{background:url(img/icon_01.png) no-repeat left center;}
a[href*="categoryB"]{background:url(img/icon_02.png) no-repeat left center;}
a[href*="categoryC"]{background:url(img/icon_03.png) no-repeat left center;}

※上記の例ではhref属性の値が「./categoryA/hoge.html」こんな感じになっているので問題ないのだけれども、もしかしたら「./categoryB/categoryA.html」(文字列「categoryA」と文字列「categoryB」が両方含まれる)なんて値が入るかもしれないので、a[href*="categoryA"]　の　"categoryA"　部分は「"/categoryA/"」とか「"categoryA/"」とかいう風にしておいた方が無難だと思います。

>>サンプルページを確認

---

E[foo|="en"]/E[hreflang|="en"] (属性選択子)

意味

"foo"属性が"en"で(左から)始まる値のハイフンで区切ったリストであるE要素に一致する

最初に定義されたCSS水準

CSS2

補足

この属性セレクタの型が最新版の英語で書いてある方の仕様書では「E[foo|="en"]」ってなってて、翻訳版（古い）のほうでは「E[hreflang|="en"]」ってなってる。どちらも値が"en"になってるし、元々は言語関連が主な用途みたいだけど、それ以外の用途で使用しても別に構わない。

ハイフンがどうたらこうたらっていうのが少しややこしいけど、上の例でいうと値が厳密に「en」であるか、またはハイフンの直前に厳密に「en」が来てるか、そのどちらかの条件に合えば適応される。例えばCSS側で E[hreflang|="en"] という風にセレクタを書いてやるとhtml側に「hreflang="en"」「hreflang="en-US"」がついてる要素があると、その両方にもマッチするという意味。

上の補足部分にも書いたけど、言語関連以外の用途で使用しても別に構わない。

class名を考える時に関連するグループでは頭は同じ単語を使ってそのあとハイフンで区切って種類を分けようというルールを用いる時とかありますよね。（なくてもあるってことにしてっ！）例えば「.sample-txt」「.sample-img」のように、そのハイフン前の単語部分の「sample」に一致するものを選択したい場合なんかにも使える。

使い方・使い道について

a要素かlink要素内で使用できるリンク先の言語を表すhreflang属性を利用して、リンク先の言語毎に背景色を変える場合はこういう風にする。

a[hreflang|="en"] {
	background:#cfc; /* 背景色・うすい緑 */
	}
a[hreflang|="zh"] {
	background:#fcc; /* 背景色・ピンク */
	}

上に書いたように言語関連以外の属性でも使用できる。

p[class|="sample"] {
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

---

属性セレクタ全般に関する備考

誤解されると申し訳ないので一応書いておきます。
上に書いた7種類の属性セレクタについて、どれを使っても同じものにマッチするというのがいろいろあるので、上記サンプルでその属性セレクタが使われてるからといって、それでないとダメということではないです。自分のマッチさせたい要素が指定できるならどれ使ってもいいです。

---

E:root (構造擬似クラス)

意味

文書のルートであるE要素に一致する

最初に定義されたCSS水準

CSS3

これは文書のルート要素を表すものらしい。使い道がよく分からないのだけれども。仕様書の翻訳をそのまま引用すると、

:root擬似クラスは、文書のルートである要素を表す。HTML4の場合においては、これはHTML要素である。XMLの場合においては、XMLの文書に対する、DTD又はスキーマ、及び名前空間に適切であれば、何でもよい。

とのこと。つーことは、これは普通のhtml文書の場合、html要素にスタイル当てるのと同じようになるってことだと思う。

使い方・使い道について

:rootを利用して背景色とフォントカラーを指定する例。

:root{
	background:#000;
	color:#fff;
	}

>>サンプルページを確認

セレクタ「:root」の部分を「html」に変更してもまったく同じ。

コメントにてルート要素＝初期包含ブロックという風に言葉を置き換えて頂きました。そっちの言葉だとイメージしやすいですね。

---

E:nth-child(n) (構造擬似クラス)

意味

その親のn番目の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

:nth-child()擬似クラスの()の中に入る引数については仕様書のこの辺り。いろんな指定方法ができるんですなぁ。(2n)のように偶数を表す「even」や(2n+1)のように奇数を表す「odd」の値も使える。

:nth-child()擬似クラス

使い方・使い道について

「何番目のなんたら」の使い道が多すぎてどんな例を挙げたらいいのか悩む。とりあえず以下6件の例。

• リストの3番目の要素だけ背景色をつける例
• リストの最初の3つに背景色をつける例
• (2n)を利用して「しましまテーブル」を作る例
• (even)を利用して「しましまテーブル」を作る例
• 3列にfloatで並べたli要素の一番右だけマージンをなくす例
• floatさせたli要素の4番目ごとにclearを入れて3段組にする例

#sample1 li:nth-child(3){
	background:#fcc; /* 背景色・ピンク */
	}
#sample2 li:nth-child(-n+3){
	background:#9cf; /* 背景色・水色 */
	}
#sample3 tr:nth-child(2n){
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample4 tr:nth-child(even){
	background:#fc6; /* 背景色・オレンジ */
	}
#sample5 li{
	float:left;
	display:inline;
	width:180px;
	height:100px;
	background:#fcc; /* 背景色・ピンク */
	margin:10px 10px 10px 0;
	}
#sample5 li:nth-child(3n){
	margin:10px 0;
	}
#sample6 li{
	float:left;
	display:inline;
	width:100px;
	min-height:80px;
	background:#cfc; /* 背景色・うすい緑 */
	margin:10px;
	}
#sample6 li:nth-child(3n+1){
	clear:left;
	}

>>サンプルページを確認

今はブラウザ側の都合でこういうのをCSSだけではなくJS併用、またはclassやidを余分に追加して実現しなくてはならないケースが多いのだけれど、マジで早く遠慮なく使えるようにして欲しいなぁと思います。

---

E:nth-last-child(n) (構造擬似クラス)

意味

最後のから数えてその親のn番目の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

1つ上の「E:nth-child(n)」 が頭から数えて何番目の…に対して、こちらは最後から数えて何番目の…というもの。「even」「odd」の値も使える。

使い方・使い道について

ul要素内の各li要素に1pxのボーダーを上下に加えていきたいとき、borderの上なり下なりに罫線を指定する。その時、例えばボーダーを各liの上側につけるとしたら、一番最後のli要素の下側の罫線がつかない。そういう時は最後のli要素にだけclassを振るとか、ul要素自体の下側にボーダーを加えるとか、なんか該当li要素部分以外にひと手間かけて対応するんだけど、（border-topとborder-bottom両方してしまうと、隣接部分のボーダーが倍になっちゃうので）このE:nth-last-child(n)を使えばスッキリ解決する。

li{
	border-top:1px solid #999;
	}
li:nth-last-child(1){
	border-bottom:1px solid #999;
	}

テーブルの最後の2行にだけ背景をつけたい例。

tr:nth-last-child(-n+2){
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:nth-of-type(n) (構造擬似クラス)

意味

その種類のn番目の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素に一致するということで、説明しにくいので図解。

周りのグレーの枠が親だと考えて、その中に入ってる子供は皆兄弟。んでもって、「兄弟関係にある同じ種類の要素」というのが、この図で言うと5つのp要素。E:nth-of-type(n)の場合は「隣接」兄弟でなくてもいいので、間にh2要素が挟まっても5つのp要素に対する「何番目の」という関係は継続する。

このE:nth-of-type(n)も「even」「odd」の値が使える。

使い方・使い道について

同じ親を持つp要素の中で4番目だけ背景色を変える例。

p {
	background:#cfc; /* 背景色・うすい緑 */
	}
p:nth-of-type(4) {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:nth-last-of-type(n) (構造擬似クラス)

意味

最後のから数えて、その種類のn番目の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

上の「E:nth-of-type(n)」が頭から数えて何番目か…に対して、こちらは最後から数えて何番目か…となる。「even」「odd」の値も使える。

使い方・使い道について

同じ親を持つp要素の中で最後から4番目だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:nth-last-of-type(4) {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:first-child (構造擬似クラス)

意味

その親の最初の子であるE要素に一致する

最初に定義されたCSS水準

CSS2

これと同じ！

:nth-child(1)

ある親要素の最初の子要素、ということで、親要素の直下要素(一番最初に現れる要素)にマッチするやつです。但し、親要素の直下がマークアップされていない場合はそれは直下要素には当てはまらない。多分、こういうCSSのお話のブログ読んでる人でマークアップせずに生のまま置いてる人はいない気がしますが一応書いておきますね。

使い方・使い道について

最初のp要素内のstrong要素だけ赤字太字にする例と、リストの一番最初のli要素だけに背景色をつける例。

p:first-child strong {
	color:red;
	font-weight:bold;
	}
li:first-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

:nth-child(1)と同じで、基本的に「1番目のなんたらをどうこうする」という使い方です。ちなみに現在TwitterのTLで、ol要素の各liにはborder-bottomが指定してありますが、そこに一番最初のli要素だけにborder-topを入れるために「ol.statuses > li:first-child」こんな風に指定してあります。

---

E:last-child (構造擬似クラス)

意味

その親の最後の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-last-child(1)

「E:first-child」の逆。こちらは最後の子にマッチする。

使い方・使い道について

最後のp要素内のstrong要素だけ赤字太字にする例と、リストの一番最後のli要素だけに背景色をつける例。

#sample1 p:last-child strong {
	color:red;
	font-weight:bold;
	}
#sample2 li:last-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:first-of-type (構造擬似クラス)

意味

その型の最初の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-of-type(1)

「自分の親要素の子のリストの中で、自分の種類の最初の兄弟である要素を表す。」というもの。隣接兄弟であってもなくても、とにかく同じ親で兄弟関係ならその要素の一番最初のものにだけマッチする。

使い方・使い道について

同じ親を持つp要素の中で最初の要素だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:first-of-type {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:last-of-type (構造擬似クラス)

意味

その型の最後の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:nth-last-of-type(1)

「E:first-of-type」の真逆。こちらは親要素の子のリストの中で、自分の種類の最後の兄弟である要素にマッチする。こちらも隣接兄弟であってもなくても同じ親で兄弟関係ならその要素の一番最後のものにだけマッチ。

使い方・使い道について

同じ親を持つp要素の中で最後の要素だけ背景色を変える例。

#sample1 p {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:last-of-type {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:only-child (構造擬似クラス)

意味

その親の唯一の子であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:first-child:last-child / :nth-child(1):nth-last-child(1)
（と同じだけど固有性は低い。）

兄弟を1つも持ってない要素にマッチ。同じ親を持つ同じ要素名の兄弟じゃなくて、同じ親を持つ兄弟自体がいない要素。

使い方・使い道について

兄弟がいないp要素だけ背景色をつける例。

.sampleDiv p:only-child {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E:only-of-type (構造擬似クラス)

意味

その種類の唯一の兄弟であるE要素に一致する

最初に定義されたCSS水準

CSS3

これと同じ！

:first-of-type:last-of-type / :nth-of-type(1):nth-last-of-type(1)
（と同じだけど固有性は低い。）

同じ要素名を持っている兄弟が1つもない要素を表す。「E:only-child」との違いは「E:only-child」は同じ親を持つ兄弟自体がいない要素にマッチするのに対して、こちらの「E:only-of-type」は同じ要素名を持っている兄弟がいない要素にマッチする。

使い方・使い道について

親の中に同じ要素名の兄弟がいない要素にだけ背景色をつける例。

.sampleDiv :only-of-type {
	background:#fcc; /* 背景色・ピンク */
	}
.sampleDiv em:only-of-type {
	background:#cfc; /* 背景色・うすい緑 */
	}

>>サンプルページを確認

---

E:empty (構造擬似クラス)

意味

(テキストのノードを含めて)子供を持たないE要素に一致する

最初に定義されたCSS水準

CSS3

子を一つも持たない要素を表す。DOMの観点から時によっては空のテキストのノードを含む。

使い方・使い道について

これも:root同様、あまり使い道が分からない。そういえば、どこかのサイトでテーブルの空セルに使えるというのを見たことがある気がします。

それ以外だと…制作途中でコーディングしてる際に要素の開始タグと終了タグだけ書いてあるけど中身は空、実はそれ不要なものでしたーというケースがないとも言い切れないので、そういう凡ミス防止のチェック用に制作途中はCSSの頭にこんなん入れたらミスに気付きやすくなるかなという案。（いや、まぁ実際はそんなミスはあまりないと思うけれども）

/* 凡ミス防止用 ここから*/	
*:empty {
	background:red;
	padding:50px;
	}
img:empty {
	background:none;
	padding:0;
	}
/* 凡ミス防止用 ここまで */	

>>サンプルページを確認

実験結果。インライン要素がemptyだとなんか大変な失態をしでかした気になる。そして上記サンプルソースのimg要素部分の指定についてなんですが、img要素のwidthとheightの指定がない場合、ちゃんと正しい文法でimg要素を置いててもempty状態とみなされるらしい。（Fxでしか検証してないので他はわからんけれども）img要素にwidthとheightを入れられない時もあるので、そのために上記のimg:emptyってやつを追加してみました。

あ、もちろんこれはネタですよ、ネタ。

真面目に使い道を考えてみると、例えばCMS使ってて、いつも全部の入力項目に内容を入れるわけじゃない、けどソースは要素が中身空のままはいっちゃう、空で入っててもmarginとかは中身が入ってる時と同じように反映されちゃう、それはやだ、そうだ！:emptyを使って中身が空の時はmarginを0にしちゃおう！というかdisplay:none;でいいや！とかいう使い方ができるのではないでしょうか。(と、書いてよく考えてみると自分の使ってるCMSツールは中身空ならソースに反映されないようにできるよな…と気付いたけどせっかく考えたからこのまま残します)

---

構造擬似クラス全般に関する備考

誤解されると申し訳ないので一応書いておきます。
上に書いた12種類の構造擬似クラスについて、どれを使っても同じものにマッチするというのがいろいろあるので、上記サンプルでその構造擬似クラスが使われてるからといって、それでないとダメということではないです。自分のマッチさせたい要素が指定できるならどれ使ってもいいです。

---

E:link　/　E:visited (リンク擬似クラス)

意味

ターゲットがまだ訪れていない(:link)か、あるいはすでに訪れている(:visited)ハイパーリンク元のアンカーであるE要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これはCSS始めたら初期段階で覚える内容だと思うのでサラっと流しますね。

a:link {color:＃0000ff; /* 未訪問のリンクカラー */}
a:visited {color:＃800080;/* 訪問済のリンクカラー */}

---

E:active　/　E:hover　/　E:focus (利用者行為擬似クラス)

意味

利用者がある行為をしている間のE要素に一致する

最初に定義されたCSS水準

CSS1及び2

使い方・使い道について

:activeは利用者が要素をアクティブ状態になった場合に適応。例えばリンクテキストをポチッと押した瞬間とか。（そういえばこの前こんなん書きました）

:hoverは利用者がポインティング装置（普通にPCでwebページ見てるならマウス・カーソルとか）を用いて要素を指定してるけどアクティブ状態ではない状態の場合に適応。例えばa要素の上にマウスカーソルが重なってる時とか。

:focusは要素がフォーカスを有する状態にある場合に適応。例えば入力フォームにテキストを入力使用としてる時とか。

a:active {color:＃0000ff; /* active時のカラー */}
a:hover {color:＃ff0000;/* hover時のカラー */}
a:focus {color:＃ffffcc;/* focus時のカラー */}

余談

あ、ちなみにですね、私がwebを始めた頃にこの:link、:visited、:hover、:activeっつーのはこの順番で書かないとマズいぜ、というTipsが流行していた（？）気がするのですが、今でもこの順番の覚え方が頭にこびりついています。今もそんな覚え方するのかどうかは知らないけれども、私と同時期にweb始めた人は絶対知ってるはず。

(n'∀')η　＜せーの！ラブハッ！　("LOVE" and "HATE")

多分一生「ラブハッ」は忘れないと思います。

順番についての追記（2010.05.14）

上ではこの順番に書かなきゃならないとサラっと流したのですが、コメントにてCSS2に順番に関する注記のお話を頂いたので補足しておきます。CSSの勉強を始めたときにそれぞれの順番が変わるとどうなるのか、手元で試した人は多いと思いますが、こうなります。

:hoverは:linkや:visitedよりも後に書かないと、カスケードの規則によって:hoverのプロパティが上書きされてしまう事になる。例えばそれぞれに別のcolorプロパティを指定していたとして、:hoverよりも後に:link,:visitedの記述を書いた場合、:hoverのcolorの値は後に書いた:link,:visitedのcolorの値が上書きされるため、hover状態になった時に:hover部分で指定したcolorの値の色は適応されない。

同じように:activeの内容を:hoverよりも先に書いた場合、:hoverの値が上書きされ:activeのcolorの値は適応されない。（hoverの状態はマウスが上に乗っている時だけではなく、クリックされている時もマウスが乗っている状態であることには変わらないのでそういうことになる）

逆に使い方の例として、:hoverや:activeより後に:visitedを指定すると常に:visitedの内容が適応される事を利用して、もし訪問済みリンクに対しては常に:visitedに指定したスタイルで固定したい場合は:visitedを一番最後に記述すればいい。

---

E:target (ターゲット擬似クラス)

意味

参照しているURIのターゲットであるE要素に一致する

最初に定義されたCSS水準

CSS3

これはページ内でのリンク等、文書内の特定の部分へのリンク する場合に「href="#sample"」や「href="hoge.html#sample"」、こんな風に「#」から始まり識別子（ここで言うとsample）で終わるURIを参照するように指定する場合に使用できる擬似クラス。マッチする対象要素は#●●でターゲットにされた●●の部分。

使い方・使い道について

該当要素がターゲットされた際に背景色を変える例。

#sample1:target {
	background:#fcc; /* 背景色・ピンク */
	}
#sample2:target {
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample3:target {
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

あとこれは前にエントリを書いたのだけれども、下記サイトでは:target擬似クラスでイメージギャラリーを作る方法が紹介されていました。

imgに対してまずposition:absolute;を指定しておいて、各リンクをクリックした時に:targetの該当img要素に対してz- indexで最前面に配置する、というもの。

Making an image gallery with :target - CSS3 . Info

---

E:lang(fr) (lang()擬似クラス)

意味

言語"fr"での型Eの要素(その文書言語は、言語が決定される方法を指定する)に一致する

最初に定義されたCSS水準

CSS2

lang属性と値がを指定された要素に対して対象言語にマッチしたものに適応される。言語コードはISO-639で定義されているものを指定。

使い方・使い道について

lang属性の値によって背景色を変更する例。

p:lang(ja){
	background:#fcc; /* 背景色・ピンク */
	}
p:lang(fr){
	background:#cfc; /* 背景色・うすい緑 */
	}

>>サンプルページを確認

以下コメントより引用
言語は E の祖先でも決まります。p:lang(ja) は <body lang="ja"><p>ほげ</p></body> の p 要素にマッチします。これは [lang|="ja"] では代替できません。

---

E:enabled　/　E:disabled (UI要素の状態擬似クラス)

意味

有効または無効にされている利用者インタフェース要素Eに一致する

最初に定義されたCSS水準

CSS3

有効になっている時のスタイルと無効になっている時のスタイルを定義できる。無効化についてはHTML側の該当要素に「disabled="disabled"」を指定する。

が、disabled属性なんて使ったことねーよ！ということで、久々にちゃんとタグ辞典を調べました。この属性が使用できる要素はフォーム関連の6つの要素でした。(input要素・textarea要素・button要素・select要素・option要素・optgroup要素)

また、同辞典によると、この状態を変更するためにはスクリプトを利用する必要があります、とのこと。JSとかで有効無効が変更できるので、その際にこの擬似クラス使うとスタイル当てるのも楽だよということなのかもしれない。

使い方・使い道について

よくJSを使って全部入力フォームを埋めるまで送信ボタンは押させない、とか、ある項目に入力があったら最初無効になってた入力欄が有効になるとかそういうやり方を見かけるけれども、そういう時に使う方法がメインなのだと思う。JSはともかく、普通に「disabled="disabled"」だけ指定して有効のinput要素と無効のinput要素で背景色を分ける例。

input{
	background:#cfc; /* 背景色・うすい緑 */
	}
input:disabled{
	background:#ccc; /* 背景色・灰色 */
	}

>>サンプルページを確認

※有効中のinput要素ってわざわざ「:enabled」つけなくても普通にinputにスタイル付けるのと上の場合は同じなのでそのようにしてます。

---

E:checked (E:indeterminate) (UI要素の状態擬似クラス)

意味

チェックされているか、またはチェックされていない状態の利用者インタフェース要素E(例えばラジオボタンやチェックボックス)に一致する

最初に定義されたCSS水準

CSS3

補足

翻訳版では型の部分に「E:checked」と並んで「E:indeterminate」というのもあるのですが、現時点での英語の最新版には今のところ書いてありませんでした。その代わり、

6.6.4.3. The :indeterminate pseudo-class
Note: Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. This can be due to an element attribute, or DOM manipulation.
A future version of this specification may introduce an :indeterminate pseudo-class that applies to such elements.

そういう不確定状態の要素として将来的に「E:indeterminate」はまた復活するのかも。（英語力ないので勘違いしてたら恥ずかしいのですが）

使い方・使い道について

チェックボックスやラジオボタンがチェックされた状態のときにラベル部分に背景色をつける例。

input:checked + label {
	background:#fcc; /* 背景色・ピンク */
	}

>>サンプルページを確認

---

E::first-line (:first- line擬似要素)

意味

E要素の最初にフォーマットされる行に一致する

最初に定義されたCSS水準

CSS1

指定した要素のテキストの1行目に適応される。「1行目」というのは幅やフォントサイズによって可変する。ブロック要素にのみ適応される。

使用できるプロパティは以下の13種類。（font関連 / color / background関連 / text-decoration / vertical-align(floatがnoneのときのみ) / text-transform / line-height / margin関連 / padding関連 / border関連 / float / text-shadow / clear）

使い方・使い道について

一行目だけスタイルを適応させる例。

p::first-line {
	color:#900;
	font-size:1.2em;
	font-weight:bold;
	}

>>サンプルページを確認

---

E::first-letter (:first- letter擬似要素)

意味

E要素の最初にフォーマットされる文字に一致する

最初に定義されたCSS水準

CSS1

指定した要素の1文字目のテキストに対してスタイルを適応させる際に使用する。細かい使用ルールは以下の通り。

• ブロック要素, list-item, table-cell, table-caption, inline-block要素にのみ適応される。
• この「E::first-letter」は「E::first-line」に含まれるため、併用している場合は「E::first-line」のスタイルを継承する。
• 「E::first-letter」と「E::first-line」で同じプロパティを指定している場合(競合している場合)は「E::first-letter」の指定が優先される。
• 1文字目に引用符やカギ括弧等の文字(Unicodeで"開き"(Ps)、"閉じ"(Pe)及び"その他"(Po)に分類されている文字)が指定されている場合は次の文字と合わせて適応対象となる。但し、言語によって特殊な規則があるものもあるので、その辺りは言語によって異なる。
• 指定できるプロパティは以下の13種類（font関連 / color / background関連 / text-decoration / vertical-align(floatがnoneのときのみ) / text-transform / line-height / margin関連 / padding関連 / border関連 / float / text-shadow / clear）

使い方・使い道について

ドロップキャップ、イニシャルキャップとしての使い方しか思い浮かばないのでその書き方。

p::first-letter {
	float:left;
	background:#ffc;
	color:#900;
	font-size:3.8em;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-weight:bold;
	padding:6px;
	border:1px solid #900;
	margin:2px 5px 0 0;
	}

>>サンプルページを確認

---

E::before (:before擬似要素)

意味

E要素の前に生成される内容に一致する

最初に定義されたCSS水準

CSS2

要素の前にcontentプロパティで生成する内容にスタイルを適応させる擬似要素。「::first-letter」「::first-line」擬似要素が「::before」と組み合わせられると、挿入されたテキストを含んでいる要素の最初の文字または行に適用される。

使い方・使い道について

p要素の前に「Note:」という文字列を挿入しその部分に背景色をつける例。

#sample1 p::before{
	content: "Note: ";
	background:#fcc; /* 背景色・ピンク */
	}

p要素の前にアイコンを挿入する例。

#sample2 p::before{
	content:url(hoge.png);
	}

挿入した画像をブロックにしてテキストを下に回り込ませる例。

#sample3 p::before {
	display:block;
	content:url("hoge.png");
	}

>>サンプルページを確認

「::before」で挿入された部分は画像を使用した場合でも、印刷時にブラウザ側で背景画像を印刷しない設定になっていてもちゃんと印刷対象となる。印刷時のロゴの扱いとかで便利かも。この擬似要素が普段使いでブラウザ気にせず使えるようになったらスゲー使い道ありますね。当分は同じ事をJSにお願いしなくてはならなさそうですが。

その他、こちらの使用例も素敵だなーと思いました。

:before 疑似要素を使ってテキストを画像に置換 - lucky bag
hxxk.jp - :before 擬似要素 / :after 擬似要素の活用例

---

E::after (:after擬似要素)

意味

E要素の後に生成される内容に一致する

最初に定義されたCSS水準

CSS2

「E::before」の逆。こちらは要素の後にcontentプロパティで内容を生成しスタイルを適応させる擬似要素。「::first-letter」「::first-line」擬似要素が「::after」と組み合わせられると、挿入されたテキストを含んでいる要素の最初の文字または行に適用される。

使い方・使い道について

訪問済みリンクテキストの右側にアイコンをつけて分かりやすくする例。

#sample1 a:visited::after {
	content:url("hoge.png");
	}

>>サンプルページを確認

---

擬似要素全般に関する備考

CSS3では擬似要素と擬似クラスを区別するために擬似要素は「：」を2つ重ねて記述するように変更されているそうです。このエントリの上記擬似要素部分やサンプルページもそのCSS3の書き方で書いています。モダンブラウザ（IEは8以上）ではその記述に対応しているので意図した描写がされます。CSS2.1の記述としてはValidにはなりません。

---

E.warning (クラス選択子)

意味

クラスが"warning"であるE要素(その文書言語はクラスが決定される方法を指定する)に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これはCSS修行の第一歩で習得する話なのでサラっと流しますね。「class="test"」を持つ要素を太字にする書き方。

.test { font-weight:bold; }

---

E#myid (ID選択子)

意味

IDが"myid"と等しいE要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

これもCSS修行の第一歩で習得する話なのでサラっと流しますね。「id ="test"」を持つ要素を太字にする書き方。

#test { font-weight:bold; }

---

E:not(s) (打消しの擬似クラス)

意味

単純選択子sに一致しないE要素に一致する

最初に定義されたCSS水準

CSS3

「E:not(s)」なら、E という要素の中で s でないのものにマッチする。引数は単純選択子（型選択子・汎用選択子・属性選択子・ID選択子・クラス選択子・擬似クラス）

使い方・使い道について

同じような要素が並んでて「この要素のこういう内容以外のもの！」って言うのをピンポイントで指定するのに便利そう。今までわざわざ例外のスタイルを指定したい要素に対してclassやid振ってたものも、これを使えばそういうの回避できるんじゃないかな、と。

最初と最後以外のp要素に背景色をつける例。

#sample1 p:not(:first-of-type):not(:last-of-type) {
	background:#fcc; /* 背景色・ピンク */
	}

class属性の指定されていないp要素だけ背景色をつける例。

#sample2 p:not([class]) {
	background:#cfc; /* 背景色・うすい緑 */
	}

class属性を持っているp要素の中で値が「.sample」ではないp要素だけ背景色をつける例。

#sample3 p[class]:not([class="sample"]) {
	background:#fc6; /* 背景色・オレンジ */		
	}

>>サンプルページを確認

---

E F (子孫結合子)

意味

E要素の子孫であるF要素に一致する

最初に定義されたCSS水準

CSS1

使い方・使い道について

親要素「E」に含まれるすべての子孫要素「F」に適用される。「子孫セレクタ」とも呼ばれている。これもCSS修行の初期段階でマスターするものなのでサラっと。p要素中のstrong要素を赤字にする書き方。

p strong { color:#f00; }

---

E > F (子結合子)

意味

E要素の子であるF要素に一致する

最初に定義されたCSS水準

CSS2

親要素「E」の直接の子要素「F」に適用される。「子セレクタ・子供セレクタ」とも呼ばれている。

使い方・使い道について

「E F (子孫結合子)」との違いは「E F (子孫結合子)」が子孫要素すべてにスタイルが適応されるのに対して、こちらの「E > F (子結合子)」は直接の子にのみ適応される。一応そのサンプルページ置いておきます。

>>サンプルページを確認

また、この「E > F」はIE6が対応していない事を逆に利用して、IE6を除外するためのCSSハック（この場合は厳密にはハックとは言わないのだけれども）的な使い方をする事もあります。

---

E + F (直接隣接結合子)

意味

E要素の直後に来るF要素に一致する

最初に定義されたCSS水準

CSS2

同じ親要素の中の兄弟関係の要素に対して、兄要素「E」の直後(隣接している)の弟要素「F」に適用される。「隣接セレクタ」とも呼ばれている。要素と要素の間に別の要素が挟まっている場合はマッチしない。

使い方・使い道について

コンテンツ内のp要素にはマージンが予め指定してあるのだけれども、見出し要素の次に出てくるp要素のみ上マージンを多めに取りたいっていう時はこんな風にします。h4要素の直後にp要素が出現する場合だけマージンを変更する例。

p{
	margin:3px auto;
	}	
#sample1 h4 + p {
	margin:12px auto 3px;
	}

また、兄要素の直後の弟要素に対しては次の別の要素が出現するまでマッチし続けます。兄弟の弟が続く場合は別の要素が入って途切れるまでマッチする例。(下記のCSSソースだけ見ても意味不明ですが、よかったらサンプルページの方を見て下さい)

#sample2 p + p {
	background:#fcc; /* 背景色・ピンク */
	}

あと、これは強引な例かもしれませんが・・・。たまにこういうレイアウトを組むときがあるんですが、htmlにclassやid振らなくてもこういうことできるよっていう例です。
1つ目のli要素だけ幅100%、残りのli要素は2カラムにする例。

#sample3 li {
	width:790px;
	height:50px;
	background:#cfc; /* 背景色・うすい緑 */
	border:1px solid #000;
	margin:5px;
	}
#sample3 li + li {
	width:388px;
	float:left;
	display:inline;
	background:#fc6; /* 背景色・オレンジ */
	}

>>サンプルページを確認

---

E ~ F (間接隣接結合子)

意味

E要素の後に来るF要素に一致する

最初に定義されたCSS水準

CSS3

フォントの関係で「～」に見えるかもしれないですが、「~ (チルダ)」です。同じ親要素の中の兄弟関係の要素に対して、兄要素「E」の後の弟要素「F」に適用されます。「E + F」との違いは直後（隣接）にFがあるのか、後（隣接してなくてもいい）にFがあるのか。「E + F」は直後にFがある場合にマッチするが、こちらの「E ~ F 」は「直」後でなくても同じ親要素の中に存在する限り「後」にあればマッチする。「間接セレクタ」とも呼ばれている。

使い方・使い道について

#sample1の中で、2つ目以降のh4要素にだけ上マージンを指定する例。

h4 {
	color:#fff;
	background:#900;
	margin:0 auto;
	}
#sample1 h4 ~ h4 {
	margin:30px auto 0;
	}

「E + F」のところで強引にやったネタ、こちらの「E ~ F」でも同じことできますね。なんせこの2つは兄弟関係にある要素に対してうまい事使えば、htmlソース内のclassやidをかなり使わずに済むようにしてくれる素晴らしい人達だと思います。

>>サンプルページを確認

---

その他の備考

「E:contains("foo") (内容擬似クラス)」と「E::selection (UI要素の断片擬似要素)」は翻訳版にはあったのですが、最新版の方ではThis section intentionally left blank.(This section previously defined a ●●)となってたので、現時点ではなくなってるみたいなのでスルーしました。

2010年05月10日 13:59 | Red | パーマリンク