カテゴリー

キーワード

 
> 【CSS】CSSの擬似クラス(~CS...

【CSS】CSSの擬似クラス(~CSS2.1)を紹介します。


2015 年 5 月 11 日 投稿    view: 1540
タグ:
このエントリーをはてなブックマークに追加

css 擬似クラス

こんにちは、WEBマーケティング部の杉尾です。


今回はCSS2.1までの擬似クラスを紹介します。
主要ブラウザではどれでも使用可能ですので、是非覚えて使ってください。



まず、CSS2.1までの擬似クラスを全て紹介

:link擬似クラス …… 未訪問のリンクにスタイルを適用。(<a>タグのみ)
:visited擬似クラス …… 訪問済のリンクにスタイルを適用。(<a>タグのみ)
:hover擬似クラス …… カーソルが乗っている要素に、スタイルを適用。
:active擬似クラス …… クリック中の要素に、スタイルを適用。
:focus擬似クラス …… フォーカスされた要素に、スタイルを適用。
:lang擬似クラス …… 特定の言語を指定された要素に、スタイルを適用。
:first-child擬似クラス …… 最初に現れる子要素に、スタイルを適用。


擬似クラスの書き方

具体的にどう書くかというと、


クラス名は通常ピリオド(.)で書き始めます。
それに対して、疑似クラスはコロン(:)を使います。


【参考ソース】

p:hover {color:red;}

ここで注意したいのは、HTMLタグに直接指定する場合(インラインCSSといいます)に使えないということです。


各擬似クラス


リンクに関する擬似クラス

擬似クラスをよく使うのは、リンクを貼るときですね。


中でも、『:link擬似クラス』と『:visited擬似クラス』に関してはaタグにしか使用できません。
(リンク用のCSSですから当然ですが)


では、まず参考ソースをどうぞ


【CSS】

a {color:red;}
a:visited {color:blue;}
a:hover {color:green;}

【解説】

1行目は、未訪問のa要素内のテキストの色(赤)を指定しています。
2行目は、リンク先を訪問したことがある場合、文字を青色にしなさいという指定です。
3行目は、カーソルが文字に乗ったとき、緑にしなさいという指定です。


ここで気をつけてもらいたいのは順番です。

CSSは下に書いたものほど、優先されるという特性があります。


どうしてそうなるのかということについては、以下の記事をご覧いただけるとよくわかると思います。


【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します


【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します


参考ソースで、:visitedを:hoverより下に書いていたら、どうなるかというと、
リンク先のサイトに訪れたことがある場合、カーソルをテキスト部分に乗せても緑に変化しなくなります。


これは下に書かれたスタイルが優先されているからです。
こうなってしまうと、ユーザーがリンクだと認識できないので、使いづらいサイトになってしまいます。


ですので、順番には気をつけてください。


それ以外の擬似クラス

:focus擬似クラス、:lang擬似クラス、:first-child擬似クラスはIE6、IE7で未サポートですが、
2015年3月時点で両方ともブラウザシェアが1%未満(IE6は0.98%、IE7は0.34%)ですので無視して構わないと思います。


:active擬似クラス

ユーザー操作で、要素がアクティブになった状態におけるスタイルを指定します。
クリックしてから離すまでが対象です。


aタグや<input type="submit">などにつけます。


参考ソースをどうぞ


【CSS】

input[type="submit"]:active {
    color:red;
}

:focus擬似クラス

ユーザー操作で要素がフォーカスされたときのスタイルを指定します。
フォーカスというのは、フォームの入力欄をユーザーがクリックしてテキスト入力が可能になった状態のことです。


【CSS】

input[type="text"]:focus {
    outline:1px solid blue;
}

この場合、フォーカスされたときに、テキストフォームの輪郭線が1pxの青い線となります。
テキストフォーム意外に、テキストエリアやセレクト要素にも使用します。


:lang擬似クラス

指定した値に一致した言語を用いている要素が対象となります。
参考ソースをどうぞ。


【HTML】

<p lang="ja">テキストja</p>
<p lang="en">テキストen</p>

【CSS】

p:lang(en) {
    color:red;
}

:lang擬似クラスの参考画像


:first-child

ある要素内における最初の子要素にスタイルを適用します。


個人的にはグローバルメニューでよく使っていました。


参考ソースをどうぞ。


【HTML】

<ul class="g_menu">
    <li>メニュー1</li>     <li>メニュー2</li>     <li>メニュー3</li>     <li>メニュー4</li>     <li>メニュー5</li> </ul>

【CSS】

ul.g_menu li {
    float:left;
    padding:10px;
    border-left:1px solid black;
}
ul.g_menu li:first-child {
    border:none;
}

:first-child擬似クラスの参考画像


【解説】

CSSの2行目 横並びを指定しています。
CSSの4行目 li要素の左側だけに太さ1pxの境界線を表示するという指定です。
CSSの6行目 擬似クラス『:first-child』で、最初のli要素だけに指定をします。
CSSの7行目 最初のli要素には境界線を表示しないという指定です。


擬似クラスと擬似要素

擬似クラスと擬似要素は似た名前でわかりづらいですが、簡単な見分け方があります。


擬似クラスは『指定した要素の状態を擬似的なクラスとして捉える』ことで、要素全体に装飾をつけるものです。
たとえば、『リンク要素にカーソルが乗ったとき』などですね。


【参考ソース】

p:hover {color:red;}

一方、擬似要素は『指定した部分(要素の一部)を擬似的に要素として捉え』て装飾をつけます。
たとえば、『文章の最初の一文字』などです。


【参考ソース】

p:first-letter {color:red;}

(擬似要素についてはいずれ紹介したいと思います)


名前は似ていますが、指定対象が違うんですね。


簡単にまとめると、


擬似クラス ⇒ 要素の状態を指定して、要素全体に装飾をつける。
擬似要素 ⇒ 要素の一部に装飾をつける。


という区別です。


注意したいこと

擬似クラスはCSS3になっても、コロン(:)は1つです。


一方、擬似要素はCSS3でコロン2つ(::)で記述するようになっています。


このおかげでわかりやすくなりましたが、IE8ではコロン2つに対応していないため、現状多くのサイトで擬似要素もコロン1つで書いています。


IE8をサポートする必要がないサイトではコロン2つで書くようにしましょう。


最後に

擬似クラスや擬似要素を使えるようになると、CSSで表現できる幅が広がりますよね


次回は擬似要素を紹介します。


最後までお読みいただき、ありがとうございました。



CSS3の擬似クラスはコチラをご覧ください。

【CSS】CSS3で追加されたセレクタ 19選!!

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事