Селекторы CSS3
Всем доброго времени суток. На связи Алексей Гулынин. В данной статье я бы хотел рассказать, какие новые селекторы появились в CSS3. Сразу отмечу, что все старые селекторы (селекторы тегов, класса, id, псевдоселекторы) также остались. С появлением новых селекторов намного упрощается работа верстальщика, так как сейчас для того, чтобы сделать что-то, не нужно придумывать велосипед и изобретать очередной костыль. Давайте создадим html-страницу, на которой будем тестировать новые селекторы:
<!DOCTYPE html5> <html> <head> <title>Новые селекторы CSS3</title> <meta charset="utf-8"/> <style> </style> </head> <body> <div id = "tester">Блок 1: Текст, текст, текст</div> <img src = "test.png" width = "200px" height = "100px"/> <ul> <li><a href = "#">Ссылка 1</a></li> <li><a href = "#">Ссылка 2</a></li> <li><a href = "#">Ссылка 3</a></li> <li><a href = "#">Ссылка 4</a></li> </ul> </body> </html>
Селектор first-child позволяет задать стиль первому элементу. Чтобы было понятнее сразу пример:
ul li:first-child {
background: red;
}
Если вы запустите данный пример, то увидите, что фон первого элемента списка стал красным. Если можно задать для первого элемента, то должно быть и для последнего:
Селектор last-child позволяет задать стиль последнему элементу. Пример:
ul li:last-child {
background: green;
}
После запуска данного примера, фон последнего элемента списка станет зеленым.
Самое замечательное то, что теперь появился селектор, с помощью которого можно задать любому произвольному элементу определенный стиль:
Селектор nth-child(), в параметрах которого необходимо передать тот элемент, к которому нужно применить стили:
ul li:nth-child(2) {
background:yellow;
}
В данном случае 2 элемент списка станет желтым. Обратите внимание на синтаксис: после ":" пробела быть не должно.
С появлением CSS3 стало возможным изменить цвет выделения. Когда мы выделяем текст на странице в браузере, он обычно становится белым на синем фоне.
Селектор ::selection позволяет настроить это дело под наш вкус:
::selection {
background: pink;
color: brown;
}
Наберите данный пример и попробуйте что-нибудь выделить (цвет выделения должен измениться).
Теперь можно фильтровать элементы на странице. Допустим нам нужно отобрать все блоки, id которых начинается с "te". Для этого нужно написать следующий код:
div[id^="te"] {
background: #4c4c4c;
}
Конструкция "^=" означает, что id (в нашем случае) должен начинаться "te". Запустите данный пример и посмотрите результат работы. С помощью следующей конструкции можно отобрать элементы, которые заканчиваются на что-то определенное. Допустим у нас есть на странице картинки в формате jpeg и png. Мы хотим всем картинкам в формате png добавить рамку. Делается это следующим образом:
div[src$="png"] {
border: 3px solid black;
}
В данной статье вы узнали о новых псевдоселекторах в CSS3. Существуют также и другие. О них будет рассказано в одной из следующих статей.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
