Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Универсальный полосатик

Пример универсального стиля Zебра. Для всех дочерних элементов первого уровня делает фон полосатый, т.е. для первого – белый, для второго – серый, для третьего – белый, для четвертого – серый и т.д.

Пример с блоками

1. Это первый div

Это первый вложенный абзац

Это первый вложенный div

Это второй вложенный div

2. Это второй div

3. Это третий div

4. Это четвертый div

5. Это пятый абзац

6. Это шестой абзац

Пример с таблицей

Это перавя строка таблицы
Это вторая строка таблицы
Это третья строка таблицы
Это четвертая строка таблицы
Исходный код этого примера:
<style type="text/css">
    .polosatik > *:nth-child(even),
    .polosatik tr:nth-child(even) {
        background: #ccc;
    }
</style>

<h2>Пример с блоками</h2>
<div class="polosatik">
<div>
    <p>1. Это первый div</p>
    <p>Это первый вложенный абзац</p>
    <div>
        <p>Это первый вложенный div</p>
    </div>
    <div>
        <p>Это второй вложенный div</p>
    </div>
</div>
<div>
    <p>2. Это второй div</p>
</div>
<div>
    <p>3. Это третий div</p>
</div>
<div>
    <p>4. Это четвертый div</p>
</div>
<p>5. Это пятый абзац</p>
<p>6. Это шестой абзац</p>
</div>
<h2>Пример с таблицей</h2>
<table class="polosatik">
    <tr><td>Это перавя строка таблицы</td></tr>
    <tr><td>Это вторая строка таблицы</td></tr>
    <tr><td>Это третья строка таблицы</td></tr>
    <tr><td>Это четвертая строка таблицы</td></tr>
</table>


.