Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
21-02-2010, 13:00
Как работает CSS-селектор nth-child - «Верстка»
Рейтинг:


В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:


ul li:nth-child(3n+3) {
color: #ccc;
}


Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д.
Но как это работает? А также какую выгоду можно извлечь используя nth-child?



Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный).
Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd - нечётные (1, 3, 5).



Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число.
Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:


ul li:nth-child(5) {
color : #ccc;
}


Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент?
Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:


(3 x 0) + 3 = 3 = 3-ий элемент
(3 x 1) + 3 = 6 = 6-ой элемент
(3 x 2) + 3 = 9 = 9-ый элемент
и т.д.


Теперь попробуем следующее выражение: nth-child(2n+1):


(2 x 0) + 1 = 1 = 1-ый элемент
(2 x 1) + 1 = 3 = 3-ий элемент
(2 x 2) + 1 = 5 = 5-ый элемент
и т.д.

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение.
Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):


(3 x 0) + 0 = 0 = нет соответствия
(3 x 1) + 0 = 3 = 3-ий элемент
(3 x 2) + 0 = 6 = 6-ой элемент
и т.д.


Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении.
Например, 4n-1:


(4 x 0) - 1 = -1 = нет соответствия
(4 x 1) - 1 = 3 = 3-ий элемент
(4 x 2) - 1 = 7 = 7-ой элемент
и т.д.


Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного
результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов.
Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":


-0 + 3 = 3 = 3ий элемент
-1 + 3 = 2 = 2-ой элемент
-2 + 3 = 1 = 1-ый элемент
-3 + 3 = 0 = нет соответствия

Кроссбраузерность



nth-child является одним из тех самых несчастных аттрибутов, которые являются полностью кроссбраузерными, за
исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если
ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход.
Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.



Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.


Ну и на последок



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


Теги: CSS 3-ий использовать элементи элемент(3 будет

Просмотров: 649
Комментариев: 0:   21-02-2010, 13:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle