[CSS] 擬似クラス・擬似要素まとめ

  CSS

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
CSS3 Cascading Style Sheets カスケーディング スタイルシート CSS

WEBサイトをコーディングする際に、「先頭・最後のリストだけスタイルを変えたい」や「偶数番号の背景色を変更したい」などに擬似クラス・擬似要素を用います。私自身WEBを勉強している中で、擬似クラス・擬似要素についてもう一度勉強し直す必要性を感じました。そこで今回は、基本的なものからCSS3などの擬似クラス・擬似要素をご紹介したいと思います。

リンク擬似クラス

まず、リンクに関するスタイルを適応させる擬似クラスを下記にご紹介したいと思います。

E:link擬似クラス

リンクに対してクリックしていない状態である未訪問リンクにスタイルを設定します。

a:link {
	color:#ff0000;
}

E:visited擬似クラス

リンクに対してクリックした状態である訪問済みリンクのスタイルを設定します。

a:visited {
	color:#ff0000;
}

E:hover擬似クラス

PCなどのマウス操作において、カーソルは乗っているがクリックはされていない状態にスタイルを設定します。

a:hover {
	color:#00ff00;
}

E:active擬似クラス

PCなどのマウス操作において、クリックされてから離されるまでの状態にスタイルを設定します。

a:active {
	color:#0000ff;
}

その他の擬似クラス

リンク擬似クラス以外に、その他の擬似クラスを下記にご紹介したいと思います。

E:focus擬似クラス

PCなどのマウス操作において、クリックされてから離されるまでの状態にスタイルを設定します。
使用例としてはフォームなどで入力の際に、選択した際に背景や枠の色を変更する際に使用します。

<input type="text" name="namae" size="30">
input:focus {
	color:#0000ff;
}

E:lang擬似クラス

特定の言語を指定された要素にスタイルを設定します。
言語コードには、ja(日本語)、en(英語)、fr(フランス語)、zh(中国語)など。
使用例としては言語によって、強調するためにスタイルを変更する際に使用します。

<p lang="en">Thank you.</p>
p:lang(en) {
	font-style:italic;
	color:#0000ff;
}

擬似要素

次に擬似要素を下記にご紹介したいと思います。
使用例としては下記に示した括弧や星・丸などのマークの挿入に使用します。

E:after・E:before擬似要素

要素の直後・直前にcontentプロパティを用いて内容(文字列・引用符・画像など)を挿入する際に使用する。

<a href="http://buburinweb.wp.xdomain.jp/">ぶぶりんブログ</a> => 『ぶぶりんブログ』
a:before {
	content:"『";
}
a:after {
	content:"』";
}

E:first-letter擬似要素

ブロックレベル要素の最初の文字にスタイルを設定します。
インライン要素には適用できない。
使用例としては頭文字を大きくして強調する際に使用します。

p:first-letter {
	font-size:18px;
}

E:first-line擬似要素

ブロックレベル要素の最初の行にスタイルを設定します。
インライン要素には適用できない。
使用例としては一行目だけを色を変えたりして強調する際に使用します。

p:first-letter {
	text-decoration:underline;
}

CSS3の擬似クラス

CSS3において使用可能となった擬似クラスを下記に示したいと思います。

E:root疑似クラス

文書のルートとなる要素にスタイルを設定します。
HTML文書ならば、html要素がルート要素となりbody要素の外側となる。

:root {
	margin: 0;
	padding: 0;
}

E:nth-child(n)疑似クラス

種類に関係なく要素を数えて、n番目の子となるE要素にスタイルを設定します。
n(偶数:even・2n+1、奇数:odd・2n+0など)。
使用例としては表を交互の色で表現するなどの特定の部分にスタイルを適応したい時に使用します。

table tr:nth-child(2n+1) {
	background-color:#FFCCCC;
}
table tr:nth-child(2n+0) {
	background-color:#CCFFCC;
}

E:nth-of-type(n)疑似クラス

途中で別の種類の要素が入る場合にはそれを数えずに、n番目のその種類の要素にスタイルを設定します。
n(偶数:even・2n+1、奇数:odd・2n+0など)
使用例としては表の先頭から4番目だけ色を変えるなどの特定の部分にスタイルを適応したい時に使用します。

table tr {
	background-color:#FFFFFF;
}
table tr:nth-of-type(4) {
	background-color:#FFCCCC;
}

E:nth-last-child(n)疑似クラス

要素の種類に関係なく後ろから数えて、後ろから数えてn番目の子となるE要素にスタイルを設定します。
n(偶数:even・2n+1、奇数:odd・2n+0など)
使用例としては表の後ろから2番目の色を変えるなどの特定の部分にスタイルを適応したい時に使用します。

table tr {
	background-color:#FFCCCC;
}
table tr:nth-last-child(2) {
	background-color:#FFFFFF;
}

E:nth-last-of-type(n)疑似クラス

途中で別の種類の要素が入る場合にはそれを数えずに、後ろから数えてn番目のその種類の要素にスタイルを設定します。
n(偶数:even・2n+1、奇数:odd・2n+0など)
使用例としては表の後ろから4番目だけ色を変えるなどの特定の部分にスタイルを適応したい時に使用します。

table tr {
	background-color:#FFFFFF;
}
table tr:nth-last-of-type(4) {
	background-color:#FFCCCC;
}

E:first-child疑似クラス

種類に関係なく要素を数えて、ある要素内で最初に現れる子要素にスタイルを設定します。E:nth-child(1)と同様の結果となる。

h2:first-child {
	display:none;
}

E:first-of-type疑似クラス

途中で別の種類の要素が入る場合にはそれを数えずに、最初のその種類の要素にスタイルを設定します。

h2:first-of-type {
	display:none;
}

E:last-child疑似クラス

種類に関係なく要素を数えて、子として最後のE要素にスタイルを設定します。E:nth-last-child(1)と同様の結果となる。

li {
	border-bottom: 1px solid #000000;
}
li:last-child {
	border-bottom: none;
}

E:last-of-type疑似クラス

途中で別の種類の要素が入る場合にはそれを数えずに、最後のその種類の要素にスタイルを設定します。

li {
	border-bottom: 1px solid #000000;
}
li:last-of-type {
	border-bottom: none;
}

E:only-child疑似クラス

種類に関係なく子要素の数が1つだけの場合にスタイルを設定します。
もし、1つだけではなかった場合は適応されません。

p span:only-child {
	text-decoration:underline;
}

E:only-of-type疑似クラス

指定した種類の子要素の数が1つだけの場合にスタイルを設定します。
もし、1つだけではなかった場合は適応されません。

p span:only-of-type {
	text-decoration:underline;
}

E:not(s)疑似クラス

sで指定するセレクタに当てはまらないE要素にスタイルを設定します。

/*xdomain.jp を含んでいる場合にスタイルを適用*/
a[href*="xdomain.jp"] { ~ }
/*xdomain.jp を含んでいる場合以外にスタイルを適用*/
a:not([href*="xdomain.jp"]) { ~ }

E:target疑似クラス

リンクのターゲット先となるE要素にスタイルを設定します。

<p><a href="#buburin">ぶぶりんブログ</a></p>
<div id="buburin">
<p>ぶぶりんブログについて</p>
</div>
#buburin:target {
	background-color:#00FFFF;
}

E:empty疑似クラス

要素内容が空となるE要素にスタイルを設定します。

table td {
	background-color:#FFFFFF;
}
table td:empty {
	background-color:#330000;
}

E:checked疑似クラス

チェックされているユーザーインターフェース要素にスタイルを設定します。

input[type="radio"]:checked {
	outline: inset 6px #00ffff;
}
input[type="checkbox"]:checked {
	outline: inset 6px #00ffff;
}

E:enabled疑似クラス

有効となっているユーザーインターフェース要素であるテキストエリアなどにスタイルを設定します。

<textarea name="reason" rows="3" cols="50"></textarea>
textarea:enabled {
	outline: inset 6px #00ffff;
}

E:disabled疑似クラス

無効となっているユーザーインターフェース要素であるテキストエリアなどにスタイルを設定します。

<textarea name="reason" rows="3" cols="50" disabled="disabled"></textarea>
textarea:disabled {
	background-color: #cccccc;
}

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

個別に後日、詳しい擬似クラス・擬似要素の使い方、適応される・されない場合についてご紹介したいと思います。

SNSでもご購読できます。

コメントを残す

*