2012-03-13 10 views
15

CSS2で順序付きリストのn番目の要素を取得する可能性はありますか?CSS2セレクタを使用して要素のn番目の子を取得するにはどうすればよいですか?

(CSS3で:nth-child()に類似)


FYI:私は、1.1 XHTMLとCSS2準拠するようにParcheesiのドイツ語版をプログラムしようとすると、注文したリストを使用してプレイフィールドを生成しようとしています移動オプションは、データ構造によって予め決定される。中心の周りに道を配置するために、リスト要素を番号で選択したいと思います。

答えて

23

あなたが特定のn番目の子に到達するために必要な回数だけコンビネータを繰り返し、:first-child pseudo-classと一緒にadjacent sibling combinatorsを使用することができます。これはan answer to a different questionでも言及されています。

すべての要素がEの場合は、E:first-childで始まり、次に対象となる要素に到達するまで次の子孫に+ Eを追加します。もちろん、同じ要素を使用する必要はありませんE、もちろんです。どんなタイプ、クラス、IDなどに対してもそれを切り替えることができますが、重要なビットは:first-child+の符号です。例として

は、そのolの第liを取得するために、以下のCSS3セレクター:

ol > li:nth-child(3) 

のでようCSS2で複製されるであろう:

ol > li:first-child + li + li 

イラスト:

<ol> 
    <li></li> <!-- ol > li:nth-child(1), ol > li:first-child --> 
    <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li --> 
    <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li --> 
    <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li --> 
</ol> 

there are no sibling combinators that look at preceding siblings (CSS2でもCSS3でも)、CSS2セレクタを使用して:nth-last-child()または:last-childをエミュレートすることはできません。

また、あなただけbは(specに記載されているように)式an+bに一定数である時、である特定の子供のための:nth-child(b)をエミュレートすることができます。隣接する兄弟結合子だけでは複雑な公式は得られません。

関連する問題