4

Добрый вечер всем. Есть родитель у него много детей

<div class="parent">
    <div class="child"></div>//green
    <div class="child"></div>//green
    <div class="child"></div>//green
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>//green
    <div class="child"></div>//green
    <div class="child"></div>//green
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>//green
    <div class="child"></div>//green
    //и т. д.
</div>

как с помощью css сделать так, чтоб каждые 3 элемента через три были зелеными?

3
  • вот еще такой вариант - jsfiddle.net/soledar10/n49qyht7
    – soledar10
    9 авг 2015 в 17:10
  • для тестирования можно использовать это - nth-test.com
    – soledar10
    9 авг 2015 в 17:12
  • @soledar10 да всё оказалось намного легче чем я думал.
    – bemulima
    9 авг 2015 в 17:47

1 ответ 1

8

Я только это придумал

.child {
    display: block;
    height: 20px;
    width: 30px;    
    background-color: #CCCCCC;    
    margin: 2px;
}
.parent div:nth-child(6n-3), .parent div:nth-child(6n-4), .parent div:nth-child(6n-5) {
    background-color: #00CC00;    
}

Пример тут http://jsfiddle.net/046xsfLk/

1
  • Вы крутой! Спасибо!)
    – bemulima
    9 авг 2015 в 16:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.