7

CSSで3つのグループを1つおきに選択することは可能ですか? もしそうなら; どうやって？

したがって、以下のサンプルでは、​​スタイルを 4-6 および 10-12 に適用しますli。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
     <li>10</li>
     <li>11</li>
     <li>12</li>
</ul>

[純粋な] JavaScript と jQuery でこれができることは知っていますが、純粋な CSS ソリューションが存在する場合はそれを探しています。

4

2 に答える 2

12

あなたはn番目の子を探しています：

ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
    background:red;
}

http://jsfiddle.net/bhlaird/utEP4/1/

于 2013-10-01T23:10:50.000 に答える
1

との組み合わせを使用して、単一のセレクターでこれを実現できます。:not:nth-child

ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3))  {
    color:blue;
}

ここでjsFiddle

ただし、他の要素のスタイルを設定できないことを考えると、そのセレクターを単独で使用することはほとんど役に立ちません。

ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6))  {
    color:red;
}

両方を組み合わせて使用​​すると、すべてのスタイルを設定できます。デモを参照してください。

于 2013-10-01T23:22:22.877 に答える