0

<li>2 つの列を形成するように配置された要素のコレクションがあります。nth-last-childandの組み合わせを使用して、nth-child(even)または他のセレクターを使用して、次のいずれかにスタイルを適用できますか: a) 最後の 2 つ (同数の<li>'s があると仮定) または b) 最後の 1 つだけ (奇数があると仮定)の数<li>)

例については私のフィドルを参照するか、以下のコードを使用してください。スタイルを適用する必要があるものを黄色で強調表示しました。

サーバー側のソリューション、html の変更、Javascript を探していません。CSS だけでできるかどうか知りたいです。ブラウザの互換性は問題ではないので、CSS3 はすべての方法です。

コード

HTML

<ul>
<li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li style="background: yellow">Hello World</li><!--
--><li style="background: yellow">Hello World</li>
</ul>

<br />

<ul>
<li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li>Hello World</li><!--
--><li style="background: yellow">Hello World</li>
</ul>​

CSS

ul {
    padding: 10px;
    width: 400px;
    background: red;
}

li {
    width: 200px;
    display: inline-block;
    background: blue;
}   ​
4

1 に答える 1

1

これを試してください - http://jsfiddle.net/HFn9Q/4/

/* set the last 2 items bg to yellow */
li:nth-last-child(2) {
    background: yellow;
}

/* clean the pre-last item bg in case of odd <li> number */
li:nth-child(even) {
    background: blue;
}

/* explicitly set the very last item bg to yellow for even <li> number, otherwise the previous rule will give it a blue bg */    
li:last-child {
    background: yellow;
}
于 2012-07-27T15:34:10.857 に答える