セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点

CSS, 戯言

css3を触ってみて思った利点の2個目

この記事は、前回の記事(セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点)の続きです。

  1. レイアウト組むのが楽ちん
  2. セレクタが便利
  3. 画像に頼らず色々出来る
  4. アニメーションが素敵

前回は途中で挫けたので、その続きのエントリーとなります。
今回は「:focus」の様に「:」を用いるセレクタである疑似クラスについての説明がメインです。
かなりの量が追加されているので、逆にややこしいかもしれません。
※表示確認には、Firefox3.5、Chrome4を使用しています。

詳細は続きから。ちなみに3ページあります。

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

HTMLには記述されていないけれども、ブラウザとしてはその認識がある状態のセレクタのことを言います。
例で言うと、未訪問リンクと、訪問済みリンクのようなもので、ブラウザとしてはその状態を認識できるものの事を指します。
前回の記事で言及した擬似セレクタは以下の4つです。

  1. :focus(css2)
    フォーカスが合っている要素を指定
  2. :enabled
    要素が有効な状態のセレクタ
  3. :disabled
    要素が無効な状態のセレクタ
  4. :checked
    要素が選択されている状態のセレクタ

また、擬似クラスと擬似要素という分類分けがされていますが、その差は以下のとおりです。

  • 擬似クラス
    →E要素の状態に対して有効なセレクタの事を指します
  • 擬似要素
    →E要素内の特定の位置や場所に対して有効なセレクタの事を指します

記事に出てくる「E」「F」「n」の説明

E、Fについて

要素のことを指す様に使用します。要素というのはtrやらh1やらaやら、一般的にはタグとも呼ばれているものでもあります。

n指定について

この後、「n」という指定が出てきますが、これはn個目を対象にすると思ってください。

  • 5だったら5個目
  • oddだったら1個目、3個目、5個目…
  • evenだったら2個目、4個目、6個目…
  • 5nだったら5個目、10個目、15個目…
  • 5nだったら5個目、10個目、15個目…
  • 2n-1だったら1個目、3個目、5個目…

と言った感じの指定が出来ます。
実例を交えて説明するので、ここは後でまた読み返してみてください。

では、CSS3で追加される予定の擬似セレクタの説明に入ります。

n番目がE要素なら指定する「E:nth-child(n)」系

この系統のセレクタは、仮にE:nth-child(2)とした場合、親要素から見て、2番目にE要素が来ていないと適用されません。
他の要素もn番目の対象になるのですが、その要素が指定した型(E)でないと適用されません。
※要するに子要素のn番目がE要素だった場合に適用されます。

n番目の要素がEだった場合に指定「E:nth-child(n)」

他の要素も含めて、子要素のn番目がE要素だった場合に指定することが出来ます。
下の例だとtrの子要素であるtdのn番目の物を指定しています。
css3_2.5_cap1
サンプルはこちらtd:nth-child(6n){
color:#00f;
}
td:nth-child(7n){
color:#f00;
}

後ろからn番目の要素がEだった場合に指定「E:nth-last-child(n)」

上の「E:nth-child(n)」と似た指定が出来るものです。
他の要素も含めて、後ろからn番目のE要素だった場合に指定できます。
css3_2.5_cap2
サンプルはこちらtd:nth-last-child(1){
background-color:#ccc;
}

子要素が1つだけで、それがE要素だった場合に指定「E:only-child」

他の要素も含めて、子要素が1つだけで、それがE要素だった場合に指定できます。
css3_2.5_cap3
サンプルはこちらtd:only-child{
background-color:#000;
color:#fff;
}

Pages: 1 2 3

2 Comments »

  1. 【Blog】kzms2 – html,css,javascript » セレクタについて(2/4)その2 – css3 を触ってみて思った4個の利点 http://bit.ly/4WOvLW #css3

    トラックバック by ずま/Zuma — 2009/12/14 月曜日 @ 0:15:26

  2. #CSS3 奇数偶数で色分けをする為のclass属性や、タブ形式表示にする為のJavaScriptが不要になるんだね。
    >セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点
    http://j.mp/5DDoZQ

    トラックバック by ごんた — 2009/12/14 月曜日 @ 14:27:58

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。