문제

Structure is here: http://jsfiddle.net/9ghUA/1/ I have blocks of 3 articles, each article has a featured article. Every 2, 3, 6, 7, 10, 11, 14, 15 etc block's featured article should sit below the 2 smaller articles.

<div class="group">
    <article class="feature">
        <h1>Block 1</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 2</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>

What would be the css child selectors for this? I can't figure out what the algorithm is?

도움이 되었습니까?

해결책

                  ___________ every 4th element
                 |   ________ starting point seccond
                 |  |
.group:nth-child(4n+2) article {
    background-color: blue;
}

                  ___________ every 4th element
                 |   ________ starting point third
                 |  |
.group:nth-child(4n+3) article {
    background-color: green;
}

.group {
    width: 300px;
    float: left;
    margin: 0 20px 20px 0;
}

article {
    width: 150px;
    height: 150px;
    background-color: #666;
    float: left;
}
article.feature {
    width: 300px;
    height: 300px;
}
.group:nth-child(4n+2) article {
    background-color: blue;
}
.group:nth-child(4n+3) article {
    background-color: green;
}
<div class="group">
    <article class="feature">
        <h1>Block 1</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 2</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 3</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 4</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 5</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 6</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 7</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 8</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 9</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>



<div class="group">
    <article class="feature">
        <h1>Block 10</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 11</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 12</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 13</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 14</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 15</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 16</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 17</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 18</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top