В CSS3 появились также новые псевдоклассы, еще больше увеличивающие точность выбора элементов.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Этот текст — заголовок документа</title>
<link rel="stylesheet" href="mystyles. css">
</head>
<body>
<div id="wrapper">
<p class="mytext1">Мой текст1</p>
<p class="mytext2">Мой текст2</p>
<p class="mytext3">Мой текст3<^>
<p class="mytext4">Мой текст4</p>
</div>
</body>
</html>
Давайте рассмотрим новый HTML-код, использованный в листинге 2.14. Здесь определяются четыре элемента <p>, которые в структуре данного документа являются братьями и потомками одного и того же элемента <div>.
Благодаря псевдоклассам мы можем воспользоваться преимуществами такой организации и сослаться на конкретный элемент, ничего не зная о его атрибутах и их значениях.
Листинг 2.15. Псевдокласс :nth-child()
P:nth-child(2)
{ background: #999999;
}
Псевдокласс определяется двоеточием, которое находится между ссылкой и названием псевдокласса. В правиле из листинга 2.15 мы ссылаемся на элементы <p>. Данное правило можно изменить следующим образом: .myclass:nth-child(2) — и обратиться к каждому элементу, являющемуся потомком другого элемента, значение атрибута class которого равно myclass. Допускается присоединение псевдоклассов к любым типам ссылок, которые мы изучили ранее.
Псевдокласс nth_child() позволяет найти определенного потомка. Как уже говорилось, в документе HTML из листинга 2.14 присутствуют
Четыре элемента <p>, и в данной структуре документа они братья. Это означает, что у них общий предок — элемент <div>. В действительности данный псевдокласс означает что-то вроде «выбрать потомка под номером…», то есть число в круглых скобках представляет собой позицию потомка или его индекс. Правило из листинга 2.15 ссылается на все элементы <p> в документе, являющиеся вторыми потомками своих предков.
В своем файле HTML замените предыдущий код кодом из листинга 2.14 и откройте этот файл в браузере. Добавьте правила из листинга 2.15 в файл mystyles. css и протестируйте этот пример.
Разумеется, применив данный ссылочный метод, можно выбрать любого потомка, просто поменяв индекс в описании псевдокласса. Например, следующее правило (листинг 2.16) распространяется только на последний элемент <p> в нашем шаблоне.
Листинг 2.16. Псевдокласс nth-child()
P:nth-child(4){
Background: #999999;
}
Как вы, вероятно, уже догадались, стили можно связать со всеми элементами, создав для каждого собственное правило.
Листинг 2.17. Создание списка с псевдоклассом nth-child()
*{
Margin: 0px;
}
P:nth-child(1){
Background: #999999;
}
P:nth-child(2){
Background: #CCCCCC;
}
P:nth-child(3){
Background: #999999;
P:nth-child(4){
Background: #CCCCCC;
}
В первом правиле в листинге 2.17 используется универсальный селектор * (звездочка), позволяющий связать один и тот же стиль со всеми элементами в документе. Этот новый селектор представляет каждый элемент в теле документа и полезен при определении некоторых базовых правил. В данном случае мы для каждого элемента определяем ширину поля 0 пикселов, для того чтобы избежать незаполненного пространства и пустых строк, которые обычно возникают по умолчанию вокруг элементов <p>.
Скопируйте последний пример кода в CSS-файл и откройте HTML-документ в браузере, чтобы проверить результат.
Дальше в листинге 2.17 несколько раз упоминается псевдокласс nth-child() — в этом перечислении мы создаем меню или список вариантов, хорошо различимых на экране за счет разноцветных строк.
Чтобы добавить в меню еще несколько пунктов, необходимо вставить в HTML-код новые элементы <p>, а в таблицу стилей — новые правила с псевдоклассом nth-child() и правильным индексом. Однако такой подход означает создание огромного объема кода, к тому же его невозможно применять на веб-сайтах с динамическим генерированием содержимого. Для того чтобы получить тот же результат более эффективным способом, нужно применить в определении псевдокласса ключевые слова odd и even (листинг 2.18).
Листинг 2.18. Использование ключевых слов odd и even *{
Margin: 0px;
}
P:nth-child(odd){ background: #999999;
}
P:nth-child(even){ background: #CCCCCC;
Теперь весь список описывается с помощью всего двух правил. Даже если мы добавим в него множество новых вариантов или пунктов, стили к ним будут применяться автоматически согласно порядковому номеру. Ключевое слово odd в определении псевдокласса nth-child()влияет на элементы <p>, являющиеся потомками другого элемента и находящиеся на нечетной позиции, а ключевое слово even — на элементы, занимающие четные позиции.
Существуют и другие важные псевдоклассы с аналогичной функциональностью. Часть из них добавлена совсем недавно, например first-child, last-child и only-child. Псевдокласс first-child ссылается только на первого потомка, last-child — только на последнего, а only-child относится к элементу, который для своего предка является единственным потомком. Эти псевдоклассы не требуют ключевых слов или дополнительных параметров, а пример их использования вы найдете в следующем фрагменте кода (листинг 2.19).
Листинг 2.19. Использование псевдокласса last-child
Для модифицирования только последнего элемента <p> в списке
*{
Margin: 0px;
}
P:last-child{
Background: #999999;
}
Еще один важный псевдокласс позволяет описать отрицание — это псевдокласс not().
Листинг 2.20. Применение стилей ко всем элементам, за исключением <p>
:not(p){ margin: 0px;
}
Правило, использованное в листинге 2.20, создает поле шириной 0 пикселов вокруг всех элементов в документе, за исключением <p>. В отличие от универсального селектора, который мы использовали ранее, псевдокласс not() позволяет задать исключение. Стили в правилах, содержащих данный псевдокласс, назначаются всем элементам HTML-документа, кроме элемента, указанного в скобках.
Вместо ключевого слова элемента можно также указывать ссылку. Например, правило из листинга 2.21 применяется ко всем элементам, кроме тех, значение атрибута class которых равно mytext2.
Листинг 2.21. Определение исключения для атрибута class
:not(.mytext2){ margin: 0px;
}
Если применить последнее правило к HTML-коду из листинга 2.14, то браузер свяжет с элементом <p>, атрибут class которого равен mytext2, стили по умолчанию, а поля остальных элементов <p> будут уменьшены до 0 пикселов.
Добавить комментарий