[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
さて、前回は、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] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。