Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

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

Пример универсального стиля 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>

.
Прокомментировать/Отблагодарить