Просмотров: 5 165

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.

Одна из проблем, с которой можно столкнуться: как выбрать все четные элементы списка, таблицы, блока, и др. элементов на веб-странице.

Можно, конечно, каждому четному элементу присвоить, какой-то определенный class, но это хорошо, когда элементов не слишком много. Добавлять это все вручную не всегда возможно и не всегда хочется.

Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.

Этот псевдокласс появился в CSS3, поэтому нужно иметь в виду, что на старых браузерах, это может не работать. Но, возможности, которые появляются при его использовании, очень впечатляют.

Одним из способов применения этого псевдокласса на практике является выборка всех четных элементов, которые располагаются в дереве HTML-документа.

Есть несколько вариантов, как это можно реализовать. Давайте их разберем.

1 вариант. Использовать параметр even.

Предположим, что у нас есть вот такой список:

<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>
</ul>

Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(even) {color:#F00;}

В итоге, получиться следующая картина.

23-05-2013 6-00-37

Even – это ключевое слово, которое означает, что будут выбраны четные элементы.

Красивое решение, не правда ли? Всего одна строка CSS стилей.

2 вариант. Использовать параметр 2n.

Этот вариант можно использовать, как альтернативный. Значение 2n означает, что будет выбран каждый второй элемент, а каждый второй элемент, по сути, является четным.

Вот как это может быть использовано применительно для таблиц.

<table width="200">
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>9</td>
  </tr>
</table>

И стили CSS

tr:nth-child(2n) {color:#F00;}

23-05-2013 6-39-39

Текст в каждом четном элементе tr стал красным.

Знание того, как работать с технологией CSS и техниками верстки — это хорошо, но одна из главных проблем в создании сайтов это вывод страниц в топ поисковых систем. Если вам нужно сделать это быстро и эффективно, советую воспользоваться следующим сервисом.