CSS3先導型構造セレクタの検討

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

私がCSS3について大好きなことの一つはセレクターに頼ることなく要素を明確にターゲットにすることを可能にするセレクターの新たな追加です。 クラス, id または他の要素属性、そしてここでカバーするものは以下のセレクタです。, ：ファースト・オブ・タイプ.

の ：ファースト・オブ・タイプ selectorは指定された要素の最初の子をターゲットにします。たとえば、下のスニペットは最初の子をターゲットにします。 h2 Webページ上.

 h2：最初の型/ *スタイル宣言* /

の ：ファースト・オブ・タイプ に等しい ：タイプのn（1）, それだけではなく最初タイプの場合は、さらに2番目、3番目などを選択できます。次のスニペットは2番目をターゲットにします h2 Webページ上の要素.

 h2：n番目の型（2）/ *スタイル宣言* /

これら2つのセレクタが同じことをしているように見えるかもしれませんが、そうではありません。次のデモを見てみましょう。

内に5つの段落要素がくるまれているとしましょう。 div, このような：

  パラグラフ1
 パラグラフ2
 パラグラフ3
 パラグラフ4
 パラグラフ5

それでは、最初の段落を選択してみましょう。 ：第一子 セレクタ.

 p：最初の子パディング：5px 10px; border-radius：2ピクセル。背景：＃8960a7。色：#fff;ボーダー：1ピクセルソリッド＃5b456a。

そして私たちが予想したように、最初の段落はうまく選択されました.

しかし、私たちが 前に別の要素を追加する 最初の段落 h1, 以下のスニペットのように：

  見出し1
 パラグラフ1
 パラグラフ2
 パラグラフ3
 パラグラフ4
 パラグラフ5

最初の段落は選択されません, 内の最初の子として div です 段落ではなくなりました, しかし今は h1.

だから、これは ：ファースト・オブ・タイプ セレクタは問題を解決するために来る.

 p：タイプオブファーストパディング：5px 10px; border-radius：2ピクセル。背景：＃a8b700;色：#fff;ボーダー：1ピクセルソリッド＃597500。

あるところ “最初”, それからまたあるでしょう “最終”.

上記の2つのセレクターの逆は、次の2つのセレクターです。の ：最後の子 そしてその ：ラストオブタイプ. 彼らは基本的に上記の2つと同じですが、彼らはターゲットにしていない 指定された要素の最後の子.

たとえば、次のスニペットはdiv内の最後の段落をターゲットにします。.

 p：最後の子パディング：5px 10px; border-radius：2ピクセル。背景：＃8960a7。色：#fff;ボーダー：1ピクセルソリッド＃5b456a。

そしてこのスニペットは、上で議論したのと同じ状況で最後の段落もターゲットにします。今回は

別の要素が直接続きます.

 p：ラストオブタイプパディング：5px 10px; border-radius：2ピクセル。背景：＃a8b700;色：#fff;ボーダー：1ピクセルソリッド＃597500。

CSS3の他の新機能と同様に、これらのセレクタは古いブラウザではサポートされていません。 Internet Explorer 6から8, を除いて ：第一子 CSS2.1以降に追加されたセレクタ。その相対的な ：最後の子 CSS3でのみ追加されました.

したがって、ここで説明したこれらのセレクタがすべてWebサイトに本当に必要な場合は、次のJavaScriptライブラリを使用できます。 選択性 CSS3セレクタの機能をエミュレートする.

Selectivizrは、jQuery、Dojo、Prototype、MooToolsなど、他のJavaScriptライブラリに依存して動作します。 MooToolsは、公式Webサイトの比較表から、すべてのセレクターを処理できるようです。.

次のように、Selectivizrと一緒にそれを含めましょう。

上記の条件付きコメントにより、これらのライブラリはInternet Explorer 8以下でのみ読み込まれるようになります。.

最後に、あなたは以下のリンクからデモを見ることができます、そしてそれは現代と古い両方のブラウザ（IE8以下）の両方で今動作するはずです。さらに調査するためにソースファイルをダウンロードすることもできます。楽しい.