セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点
css3を触ってみて思った利点の2個目
この記事は、前回の記事（セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点）の続きです。
- レイアウト組むのが楽ちん
- セレクタが便利
- 画像に頼らず色々出来る
- アニメーションが素敵
前回は途中で挫けたので、その続きのエントリーとなります。
今回は「:focus」の様に「:」を用いるセレクタである疑似クラスについての説明がメインです。
かなりの量が追加されているので、逆にややこしいかもしれません。
※表示確認には、Firefox3.5、Chrome4を使用しています。
詳細は続きから。ちなみに3ページあります。
擬似クラス・擬似要素とは
HTMLには記述されていないけれども、ブラウザとしてはその認識がある状態のセレクタのことを言います。
例で言うと、未訪問リンクと、訪問済みリンクのようなもので、ブラウザとしてはその状態を認識できるものの事を指します。
前回の記事で言及した擬似セレクタは以下の4つです。
- :focus(css2)
フォーカスが合っている要素を指定 - :enabled
要素が有効な状態のセレクタ - :disabled
要素が無効な状態のセレクタ - :checked
要素が選択されている状態のセレクタ
また、擬似クラスと擬似要素という分類分けがされていますが、その差は以下のとおりです。
- 擬似クラス
→E要素の状態に対して有効なセレクタの事を指します - 擬似要素
→E要素内の特定の位置や場所に対して有効なセレクタの事を指します
記事に出てくる「E」「F」「n」の説明
E、Fについて
要素のことを指す様に使用します。要素というのはtrやらh１やら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番目の物を指定しています。
サンプルはこちら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要素だった場合に指定できます。
サンプルはこちらtd:nth-last-child(1){
background-color:#ccc;
}
子要素が1つだけで、それがE要素だった場合に指定「E:only-child」
他の要素も含めて、子要素が1つだけで、それがE要素だった場合に指定できます。
サンプルはこちらtd:only-child{
background-color:#000;
color:#fff;
}
