Доброго времени суток, читатели текущей публикации. Сегодня я затрону важные темы, без знания которых практически невозможно верстать профессиональные и качественные сайты, а также разбирать чужой код. Это основы основ.
В данной статье я объясню, что такое селекторы в css и каких видов они бывают, также подробно расскажу, что такое классы, псевдоклассы и псевдоэлементы, кого называют родителем или предком, а кого потомком или дочерним элементом. Безусловно, на ключевые моменты теоретического материала я подготовил практические задания и привел готовые программные решения. Приступим же!
Что такое селекторы и какую роль они играют?
Если вы хоть раз работали с файлом расширения .css или управляли стилями, то могу вас порадовать и сказать, что вы уже познакомились с селекторами.
Итак, что же это за приспособление такое?
Селекторы – это наименования элементов, к которым вы применяете определенный список стилевых правил.
Весь css-код состоит из селекторов, свойств и их значений. Для 100% понимания я приведу пример:
Body (селектор) { font-size (свойство): 25px; (значение)}
В качестве селектора может выступить любое название элемента, который вы хотите видоизменить. Это могут быть атрибуты, классы, идентификаторы и теги.
Также существует универсальный селектор (*), в котором прописывается набор стилей сразу для всех параметров веб-страницы. Выглядит он следующим образом:
*{ набор стилевых правил;}
Думаю, вы уже и сами догадались о главной функции, которую выполняет данный механизм и соответственно css. Конечно стили можно прописывать и в разметке, написанной на html и html5, однако в таком случае код становится хаотичным, а отслеживание багов превращается в пытку. Поэтому разделение структуры сайта и его оформления обладает рядом преимуществ:
- Код становится более «прозрачным» и пугающий хаос превращается в порядок;
- Легче отслеживать ошибки;
- Благодаря возможностям css работа с селекторами становится гибкой и дизайн сайта выглядит намного лучше.
Типы селекторов
Как я уже говорил, в качестве селектора могут выступать любые элементы, объявленные на веб-странице. Поэтому сейчас я помогу разложить по полочками ваши знания.
Селектор тегов
Начну по приоритетам, т.е. сначала расскажу про базовый селектор – селектор тегов.
Тот, кто подумал: «Ага, сейчас пойдет речь о привычных мне тегах» был прав. Потому что работа происходит непосредственно со всевозможными элементами языка разметки. Тут все понятно, так что переходим к примеру:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Селекторы тегов</title> <style> h3 { text-decoration: line-through; } </style> </head> <body> <h3>Здесь написан какой-то текст.</h3> </body> </html> |
Классы
Теперь переходим к классам. Если вы видите в css-коде что-то такое: “.gradient”, то это значит, что где-то в разметке для определенного элемента или группы элементов разработчиком был задан атрибут class с именем gradient.
Отмечу, что к одному тегу может быть применено сразу несколько классов и при этом они перечисляются просто через пробел. Классы нужны для того, чтобы один и тот же элемент мог выглядеть по-разному. Так, в примере вы можете наблюдать за изменением внешнего вида заголовка третьего уровня.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>классы</title> <style> h3 { text-decoration: underline; } .dif { color: red; text-decoration: overline; } </style> </head> <body> <h3>Здесь написан какой-то текст.</h3> <h3 class="dif">Здесь написан какой-то текст.</h3> </body> </html> |
Идентификаторы
Теперь перескакиваем на идентификаторы (id). По назначению они очень похожи на классы, однако с ними удобно работать в скриптах, например, в JavaScript-коде.
Также селекторы типа id должны быть уникальными. Для того чтобы объявить такой элемент как селектор, нужно перед названием дописать символ «#». Чтобы посмотреть пример кода вот вам задание:
- в прошлом примере замените слово class на id;
- замените «.» на «#»;
- посмотрите результат (он не должен отличаться от результата прошлого примера).
Селектор атрибутов
И наконец мы подошли к селекторам атрибутов. Точно так же, как и в предыдущих типах, в css существует возможность управлять стилями отдельных атрибутов.
Для этого наименование последнего стоит обрамить квадратными скобками: [атрибут]. Можно использовать и вместе с селектором, но в таком случае пробела между ними быть не должно!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Селекторы атрибутов</title> <style> h2 { text-decoration: underline; color: red; } [title] { color: brown; } strong[title] { color: green; } </style> </head> <body> <h2>Заголовок новостной статьи</h2> <p title="основной текст">Тут написан текст публикации. А теперь вставлена: "<strong title ="Слова древнегреческого мыслителя.">важная цитата знаменитости</strong>".</p> </body> </html> |
Псевдоклассы
Вот мы и добрались к более сложному материалу. Сейчас я хочу рассказать вам о селекторах, использующих псевдоклассы и псевдоэлементы.
Если вы читали другие мои публикации, то уже могли встретиться с описанием данных инструментов, разобрать примеры и может даже продвинуться дальше, самостоятельно изучив более сложные приемы. Однако не стоит забывать, что всегда можно узнать что-то новое.
Итак, псевдоклассы – это такие инструменты, которые позволяют описывать элементы разметки, с которыми в свою очередь взаимодействовали пользователи.
Отличным примером могут стать кнопки или ссылки. Псевдоклассы описываются обязательно с селектором, после которого без пробела ставится «:» и далее название псевдокласса.
Все они делятся на 3 вида:
- отвечают за текущее состояние объектов;
- определяют иностранный язык и его особенности синтаксиса;
- относятся к дереву эелементов.
Группа | Наименование | Предназначение |
1 | :link | Описывает внешний вид ссылок, на которые еще не переходил пользователь. |
:active | Задает оформление активному объекту. К примеру, при наведении на объект веб-страницы он увеличивается или начинает мигать. | |
:focus | Отвечает за стиль элемента, на который наведен фокус. Такое можно наблюдать на формах в текстовых полях. | |
:visited | Определяет внешний вид ссылок, по которым уже был совершен переход. Например, в поисковиках такие ссылки выделяются другим цветом. | |
:hover | Стиль объекта меняется при наведении на него курсора. | |
2 | :lang | Взаимодействует вместе с html-кодом. В нем через одноименный атрибут задается язык контента, а в css при помощи :lang указываются стилевые особенности. |
3 | :first-child | Задает стилевые правила первому элементу во всем дереве. |
Теперь рассмотрим пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Псевдоклассы</title> <style> a{font-size: 35px; background:#EEEED1;} A:link { color: color: #00008B; } A:visited { color: #838B8B; } A:hover { color: #FF34B3; background:#FFFeE0; } a:first-child { margin-left:75px;} </style> </head> <body> <p><a href="#">First link</a> Second link </p> <p>Third link </p> </body> </html> |
Псевдоэлементы
И последнее, что мы сегодня разберем, будут псевдоэлементы. Они отличаются от предыдущего инструмента тем, что помогают стилизовать внешний вид элементов, которых нет в дереве веб-документа.
В плане синтаксиса все остается таким же, как и у псевдоклассов. Однако если вы встретите что-то такое: «::after», то не хватайтесь за голову. Это тоже псевдоэлемент. Его синтаксис выглядит по-другому, потому что с появлением css3 было решено описываемый инструмент отличать от предыдущего при помощи двойного двоеточия. Но валидатор пропустит оба варианта написания.
Существует всего 4 псевдоэлемента.
Псевдоэлемент | Назначение |
::before | С его помощью можно вставить некий текст перед содержимым указанного объекта. |
::after | С его помощью можно вставить некий текст после содержимого указанного объекта. |
::first-line | Форматирует первую строчку текстового контента. |
::first-letter | Задает стиль первого символа в указанном блоке. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>псевдоэлемент</title> <style> .new::after { content: "Свежие новости!"; padding: 12px; border-radius: 10px; color: red; background-color: #FFD700; } </style> </head> <body> <article class="new"> <header><h1>Название 1</h1></header> Текстовый контент первой публикации. </article> <article> <header><h1>Название 2</h1></header> Текстовый контент первой публикации. </article> </body> </html> |
На этом и закончу. Я постарался уместить в одну статью главную информацию, которая даст вам четкое понимание селекторов и их типов. Если вам понравилась публикация, то подписывайтесь на обновления и делитесь впечатлениями с друзьями. Желаю удачи! Пока-пока!
С уважением, Роман Чуешов