こんにちは、さいとうです。
前回は、「擬似要素[::before]や[::after]にて特殊文字・機種依存文字を表示する方法」を紹介しましたが、
［擬似要素］には他にも種類がありますし、［擬似クラス］というのも存在します。
CSS3を使ってスマートにウェブサイトをコーディングするには、これらをうまく使用することが不可欠です。
あぁ、今回も普段の生活ではおよそ接点の無いCSSの話ですね。コーディング関係ない人は
北海道名菓「白い恋人」のパッケージにもなっているオタトマリ沼から見た利尻富士の写真を見たあとでそっ閉じです。
前回紹介した［::before］や［::after］の他にはどんな擬似要素があるんでしょうか？
擬似要素には以下の種類があります。
::before …指定した要素の前にコンテンツ（テキストなど）を挿入する ::after …指定した要素の後ろにコンテンツ（テキストなど）を挿入する ::first-letter …指定した要素の最初の文字にCSSを適用する ::first-line …指定した要素の最初の行にCSSを適用する
直接HTMLにタグで指定すること無く、CSSで擬似的に指定した要素の一部に対して影響をあたえるので “擬似要素”というようです。
CSS3では指定する時にダブルコロン（::）をつけて使用します。
ですが、一部のブラウザではシングルコロンでしか動作しないため、シングルコロン（:）での使用が無難です。
正直、［::before］と［::after］以外は、ほとんど使わないと思います。
海外では［::first-letter］は一般的かもしれませんが、日本ではあまり使わないですしね。
［::first-line］も使いどころに困る感じです。
擬似要素の他にも擬似クラスというのもあります。
擬似クラスにはどんなものがあるのでしょうか。
:link :visited :hover :active :focus :checked :enabled :disabled :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :not
うわ、面倒くs… いっぱいありますね。
指定した要素全体に対して影響をあたえるので、CSSのクラスのように振る舞うことから“擬似クラス”といいます。
全部説明するのは大変なのでザックリ説明すると、
［:link］［:visited］［:hover］［:active］は、ご存知の通り リンク指定する時に使用します。
［:hover］は<a>タグ以外にも使用する時があります。
例えば、入れ子のリスト<ul>を使ってCSSのみでドロップダウンメニューを作る時に、
ul.dorpmenu li > ul { display: none;}
ul.dorpmenu li:hover > ul { display: block;}
とすれば、親のリストにオンマウスした時にその子階層リストが表示される仕組みです。
［:focus］［:checked］［:enabled］［:disabled］は、主にフォーム関連の指定で、
それぞれ「フォーカスが当たった時／チェックボックスがチェックされた時／フォームが有効な時／フォームが無効な時」になります。
［:first-child］［:last-child］［:nth-child］［:nth-last-child］は、指定したタグの順番を指定してCSSを適用します。
それぞれ「最初のタグ／最後のタグ／最初から数えて○番目のタグ／最後から数えて○番目のタグ」となります。
［:first-of-type］［:last-of-type］［：nth-of-type］は、ちょっと説明しにくいですが、
親要素タグの中に内包するの子要素の種類ごとに「最初の要素／最後の要素／○番目の要素」に適用します。
何を言ってるのか わからねーと思うが、おれも何を言っているのか わからなかった…
冗談はさておき、具体的な例をとして、
［HTML］
<div>
<p>あ…ありのまま 今 起こった事を話すぜ！</p>
<p><em>『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』</em></p>
<p>な… 何を言ってるのか わからねーと思うが おれも何をされたのかわからなかった…</p>
<p>頭がどうにかなりそうだった…</p>
<p><span>催眠術</span>だとか<span>超スピード</span>だとか そんなチャチなもんじゃあ 断じてねえ</p>
<p>もっと恐ろしいものの片鱗を味わったぜ…</p>
</div>
［CSS］
div :first-of-type { color: red;}
と指定すると、
親要素<div>の中にある子要素の種類は<p>、<em>、<span>とありますが、
それぞれ最初に登場するのは、
<p>あ…ありのまま 今 起こった事を話すぜ！</p>
<em>『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』</em>
<span>催眠術</span>
なので、これらの文字にCSSが適用されます。
あぁ、説明が長くなりました。もう少し。
［:empty］は要素の中が空の時にCSSを適用、
［:target］はページ内リンク等の“#“がついているリンク先の要素にCSSを適用、
［:not］は指定した要素以外にCSSを適用します。
［:link］［:visited］［:hover］［:active］［:focus］［:first-child］
は、従来から各種ブラウザに対応していましたが、他はCSS3となりますので、古いIEでは対応していない場合が多いです。
それでも、「偶数ごとに〜」とか「４の倍数ごとに〜」とかを指定できる［:nth-child］と、
フォームを使いやすく装飾できる［:checked］［:enabled］［:disabled］などは、
ブラウザ対応の条件次第で、これからどんどん使われていくことになると思います。
場合によっては擬似要素と擬似クラスを同時に指定することもあります。
例えば、リストの最初の項目の冒頭にコンテンツを挿入する場合は以下のように記述します。
li:first-child::before { ~ }
［:first-child］が［::before］の前にありますね。
このように同時に記述する場合は、擬似クラスを擬似要素の前に書きます。
覚えておくと役に立つこともあるかもね。
うーん、説明のみだとその便利な感じが上手くお伝えできてない感じなので、
次回はこれらを使っておもしろい装飾の例を挙げてみたいと思います。（忘れてなければね）
さいとう
