CSS3 - новые псевдоклассы

Веб-программирование --- CSS3 --- Новые псевдоклассы

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

Для начала рассмотрим простой пример таблицы, на которой и будем испытывать новые псевдоклассы:

Перед вами довольно стандартный счет с ценами, количеством единиц товара, суммами строк, промежуточной суммой и общей суммой заказа. Счет было бы удобнее просматривать, если бы строки были окрашены в разные цвета. Также будет полезно изменить цвет итоговой суммы, чтобы она лучше выделялась на общем фоне.

Ниже приведен код таблицы и ее базовое стилевое оформление:

<table>
  <tr>
    <th>Продукт</th> 
    <th>Цена</th> 
    <th>Количество</th> 
    <th>Общая стоимость</th> 
  </tr> 
  <tr>
    <td>Кофе</td>
    <td>30</td> 
    <td>5</td> 
    <td>150</td> 
  </tr> 
  <tr>
    <td>Рубашка</td>
    <td>400</td>
    <td>2</td> 
    <td>800</td> 
  </tr>
  <tr>
    <td>Красный степлер</td>
    <td>50</td>
    <td>4</td> 
    <td>200</td> 
  </tr>
  <tr>
    <td colspan="3">Общая стоимость</td> 
    <td>1150</td> 
  </tr> 
  <tr>
    <td colspan="3">Доставка</td> 
    <td>120</td> 
  </tr> 
  <tr>
    <td colspan="3">Итого</td> 
    <td>1270</td> 
  </tr> 
</table>

table {
   width: 600px;
   border-collapse: collapse;
}

th, td {
   border: none;
}

th {
   background-color: #000; 
   color: #fff;
}

Чередование цвета строк (:nth-of-type)

Каждый из нас неоднократно видел таблицы с чередованием цвета строк (эффект зебры): этот эффект полезен тем, что упрощает просмотр данных по строкам. Стилевое оформление такого рода лучше всего выполняется средствами уровня представления, то есть CSS. Традиционно задача решалась включением в строки таблицы дополнительных имен классов (например, odd и even для нечетных и четных строк соответственно).

Однако подобное загрязнение разметки таблицы нежелательно, поскольку спецификация HTML5 рекомендует избегать использования имен классов для определения представления. При помощи новых селекторов мы сможем добиться желаемого эффекта без изменения разметки — таким образом, представление будет отделено от контента.

Селектор nth-of-type находит каждый n-й элемент конкретного типа, определяемый формулой или ключевыми словами. Формулы будут более подробно рассмотрены позднее, а пока разберемся с ключевыми словами, потому что их проще понять.

Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все четные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций:

tr:nth-of-type(even) {
	background-color: #DCC;
}

tr:nth-of-type(odd) {
	background-color: #F3F3F3;
}

Фактически этот селектор означает: "Найти каждую четную строку таблицы и задать ее цвет. Затем найти каждую нечетную строку таблицы и задать ее цвет. Так "зебровая" окраска таблицы реализуется без использования сценарного кода или дополнительных имен классов в строках.

Очередная версия стилевого оформления таблицы выглядит так:

Выравнивание текста столбцов (:nth-child)

По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого — чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child, но сначала необходимо узнать, как он работает.

Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an+b, где а — множитель, a b — смещение. Принцип использования формул проще понять на примере. Давайте применим его к контексту таблицы. Для выбора всех строк таблицы можно воспользоваться селектором вида:

tr:nth-child(n)

В этом примере не указан ни множитель, ни смещение. Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:

tr:nth-child(n+2)

А для выбора каждой второй строки таблицы используется множитель 2n:

tr:nth-child(2n)

Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:

tr:nth-child(2n + 4)

Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:

td:nth-child(n+2) {
	text-align: right;
}

Выделение последней строки (:last-child)

Таблица уже сейчас смотрится вполне прилично, но начальство требует, чтобы нижняя строка выделялась жирным шрифтом. Для этого мы воспользуемся селектором last-child, который находит последний дочерний элемент группы:

tr:last-child {
	font-weight:bold;
}

Поиск в обратном направлении (:nth-last-child)

Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула an+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы, что, собственно, и нужно сделать в нашем примере.

Итак, оформление строки со стоимостью доставки может быть изменено следующим кодом:

tr:nth-last-child(2) {
	color: green;
}

Селектор определяет конкретный дочерний элемент — второй с конца.

В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с описаниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением:

tr:nth-last-child(-n+3) td { 
    text-align: right;
}

Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.

Новое оформление таблицы выглядит намного лучше, причем нам совершенно не пришлось изменять разметку:

Псевдоклассы состояний

В CSS3 появилось несколько новых псевдоклассов, определяющих состояние элементов. Эти псевдоклассы применяются в основном к элементам форм. К ним относятся :enabled - элемент включен и доступен, :disabled - элемент отключен, :checked - используется в переключателях input типа checkbox или radiobutton. Ниже показан пример использования этих элементов:

<form action="#">
   <fieldset>
     <legend>Выберите любимые цвета</legend>
     <label><input type="checkbox"> Красный</label>
     <label><input type="checkbox"> Синий</label>
     <label><input type="checkbox"> Зеленый</label>
     <label><input type="checkbox"> Желтый</label>
     <label><input type="checkbox"> Фиолетовый</label><br>
     <button>Сохранить</button>
     <button disabled>Отмена</button>
   </fieldset>
</form>

button:enabled {
	border: 2px #92e0f7 solid;
	background: #2ccbf9;
	color:white;
}

button:disabled {
	border: 2px gray solid;
	background: #999;
	color:#CCC;
}

В стилях задается оформление для двух состояний кнопки: