[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

公開日: : CSS, Web制作 ,

さて、前回は、CSSのセレクタをおさらいしました。
そして、属性セレクタを取り上げている記事も合わせて読んでみてください。

今回は、疑似クラス・疑似要素をおさらいしましょう。

疑似クラス・疑似要素とは

一番よく使われている疑似クラスは、

  • a:link
  • a:hover
  • a:visited
  • a:active

の4種類でしょう。

疑似クラスは、要素が特定の状態にある場合に適用するものです。

そして、疑似要素は、clearfixなどでおなじみの:afterや:beforeがそうです。

疑似要素は、特定の文字や行に対してスタイルを適用するものです。

疑似クラス

それでは疑似クラスから見ていきましょう

:first-child

最初にくる要素に適用されるのがこの:first-childです。
この:first-childは、それなりに使い勝手はいいのですが、理解してないと思うようにならなかったりします。

p a:first-child{
color:pink;
}

こういう感じで使います。
この場合、最初のリンク要素に適用されます。
ここで注意しておきたいのが、最初の要素がaタグでない場合、適用されません。

<p><strong>リンク</strong><a href="#">テキスト</a></p>

こういう場合ですね。
指定している要素より前に他の要素があると、無視されるようです。

:last-child

これは、先ほどの:first-childと全く逆の最後の要素に適用されます。
どちらの疑似クラスもよく使います。

ul li:last-child{
 border-bottom:none;
}

こういった風に、最後だけ下線を引かないとか割と使う場面はあります。

:nth-of-type(n) または:nth-child(n) n番目の要素に適用

テーブルの1行ごとに色を変える場合などによく使われているのが、この疑似クラスです。
(n)の部分は、かなりいろんな形の指定方法があります。

  • :nth-child(n) n番目の要素に適用
  • :nth-child(odd) 奇数番目の要素に適用
  • :nth-child(2n+1) これも上記と同じ奇数番目の要素に適用
  • :nth-child(even) 偶数番目の要素に適用
  • :nth-child(2n) 2の倍数ということなので、上記と同じ偶数番目の要素に適用
  • :nth-child(3n) 3の倍数にあたる3.6.9番目の要素に適用

と、かなりいろんな指定ができます。
3番目にあるように(2n+1)のような計算している方法で指定ができるので(5n+1)と指定すると6,11,16と5の倍数に1を足した数を指定できます。

ul li:nth-child(even){
 background-color:#666;
}

こういう風に使います。

:link、:active、:visited、:hover

これは、まとめて説明しちゃいます。

基本的には:hover以外、リンク要素に対してしか使いません。
:hoverは、どんな要素に対しても使えますので、divであったりテーブル要素のtrであったりと、マウスがどこを指しているか一目でわかるように使ったりもします。

  • :link リンクされている場合に適用されます
  • :active マウスでクリックされている状態の時に適用されます
  • :visited すでに訪れているリンク要素に適用されます
  • :hover マウスが乗っかっている状態の要素に適用されます

疑似要素

:before

:beforeは、要素の直前に内容を挿入する際に使用します。
よく使われる場面としては、引用で”を付ける場合:beforeを使用します。

blockquote:before{
 content:'“';
 position:absolute;
 color:#e5dac0;
 font-size:6em;
 z-index:-10;
 left:-33px;
 top:-20px;
 width:36px;
 height:29px;
}

こういう風に使います。

:after

:afterは、:beforeのの反対で、要素の直後に内容を挿入します。
:beforeと同じように引用の後ろに”を入れる時などに使われますし、clearfixですでに使っている人も多いのではないでしょうか。

.clearfix:after{
 content: "";
 clear: both;
 display: block;
}

こういう風にclearfixを取り上げてみましたが、要素の直後に空の内容をおいてクリアしています。

:first-letter

雑誌風のレイアウトによく使われているのがこの:first-letterです。
最初の1文字目だけに適用されるため、使用頻度はかなり低いですが、表現の方法として覚えておくといいでしょう。

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

こういう風に使います。

:first-line

:first-lineは、最初の一行だけに適用されるため、使用頻度は低いです。
それでも、強調したい場合などにうまく取り入れるといいかもしれません。

p:first-letter{
 color:#03C;
}

こういう風に使います。

まとめ

いかがでしたでしょうか。
ざっとよく使われているものや、よく知られているものを紹介しました。
これで全てではありません。

使い方次第で、とても面白い表現ができたりするので、いろいろと試してみるといいかもしれません。

ad

関連記事

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑