Цикл статей «CSS учебник».
Следующая статья — «CSS цвет».
Предыдущая статья — «Синтаксис CSS».
С помощью селекторов можно выбирать элементы, к которым будут применены правила оформления на странице.
Селекторы тегов в CSS
Можно выбрать элементы на странице по названию тега.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> p { background-color: #f0f0f0; }; </style> </head> <body> <p> Шла Саша по шоссе и сосала сушку. </p> <p> Крокодил плывёт. </p> <p> Индейцы пошли в атаку. </p> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors1">Статья с описанием видов селекторов CSS</a> </body> </html> |
В этом примере все абзацы будут иметь серый фон. Посмотреть результат.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> div { background-color: #f0f0f0; }; </style> </head> <body> <p> Шла Саша по шоссе и сосала сушку. </p> <div> Крокодил плывёт. </div> <p> Индейцы пошли в атаку. </p> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors2">Статья с описанием видов селекторов CSS</a> </body> </html> |
Здесь элемент <div> будет иметь серый фон. Посмотреть результат.
Селекторы классов в CSS
С помощью этого виде селекторов можно указать группу элементов, к которым будет применено CSS-правило. Сначала нужно добавить атрибут class="<имя_нашего_класса>" к тем элементам, к которым нужно применить оформление. Если у элемента несколько классов, то их нужно перечислять через пробел. Затем в качестве селектора использовать это имя с предваряющей его точкой: .<имя_нашего_класса>. Можно также перед точкой указать тег, и правило будет применено к указанным тегам с классом.
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> .graybackground { background-color: #f0f0f0; } p.bluefont { color : #0000ff; } </style> </head> <body> <p class="graybackground"> Это p с классом graybackground. </p> <p> Это p без классов </p> <p class="bluefont"> Это p с классом bluefont. К нему будет применено правило синего цвета шрифта. </p> <p class="graybackground bluefont"> Это p с классами graybackground и bluefont. К нему будут применены оба правила. </p> <div class="bluefont"> Это div с классом bluefont. К нему правило применено не будет. </div> <div class="graybackground bluefont"> Это div с классами graybackground и bluefont. К нему будет применено только правило graybackground. </div> <div> Это div без классов. </div> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#classselectors1">Статья с описанием видов селекторов CSS</a> </body> </html> |
Селекторы идентификаторов в CSS
Можно указывать правила для элементов с конкретным id. Для этого в качестве селектора используется id элемента с предваряющим его символом решётки: #myelid. Можно указывать не только id, но и тег перед решёткой: p#myelid1. Но учитывая, что элементов с одинаковыми id на странице быть не должно, то указание тега вряд ли имеет смысл.
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 27 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> #myelid1 { background-color: #f0f0f0; } p#myelid2 { background-color: #0000ff; } </style> </head> <body> <p id="myelid1"> Это p с id=myelid1. </p> <p id="myelid2"> Это p с id=myelid2. </p> <p id="myelid3"> Это p с id=myelid3. </p> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#idselectors1">Статья с описанием видов селекторов CSS</a> </body> </html> |
Селекторы атрибутов в CSS
Можно применять правила к элементам, имеющим определённый атрибут или определённое значение в атрибуте.
[<атрибут>] — селектор элементов с указанным атрибутом.
[<атрибут>=<значение>] — селектор элементов с указанным значением атрибута.
<селектор>[<атрибут>] — селектор элементов с указанным селектором и указанным атрибутом.
<селектор>[<атрибут>=<значение>] — селектор элементов с указанным селектором и указанным значением атрибута.
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 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> /*Правило применится ко всем тегам a, у которых указан атрибут target.*/ a[target] { font-style : italic; /* Наклонный шрифт */ } /*Правило применится ко всем тегам a, у которых в атрибуте target указано "_blank"*/ a[target="_blank"] { background-color : #f00000; /*Красный цвет фона*/ } </style> </head> <body> <p> <a href="https://urvanov.ru">Ссылка без target</a> </p> <p> <a href="https://urvanov.ru" target="_parent">Ссылка с target</a> </p> <p> <a href="https://urvanov.ru" target="_blank">Ссылка с target="_blank"</a> </p> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#attributeselectors1">Статья с описанием видов селекторов CSS</a> </body> </html> |
Комбинирование селекторов
Можно создавать селекторы для элементов, находящихся внутри других элементов или являющихся дочерними к элементами. Также можно создавать селекторы для соседних элементов.
Селектор для тега <p>, находящегося внутри тега <div>:
1 2 3 |
div p { background-color : #f0f0f0; } |
Приведённое выше правило будет работать не только для элементов <p>, вложенных напрямую в <div>, но и для элементов <p>, вложенных в какой-нибудь элемент, являющийся вложенным в элемент <div>. Иерархия может быть многоуровневой.
Если нужно создать правило для строго дочернего элемента, то селекторы комбинируются с помощью символа «>»:
1 2 3 |
div>p { background-color : #f0f0f0; } |
Можно создать правило для тега, следующего за другим тегом:
1 2 3 |
b + i { background-color : #f0f0f0; } |
Можно создавать более сложные правила вроде:
1 2 3 4 5 |
/* Правило для тега b, соседнего с тегом p, где p вложен в div, а div прямой потомок тега с классом class1.*/ .class1>div p+b { } |
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 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Селектры CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style media="screen"> /* Правило 1. */ .myparentclass>p b { background-color: #0000f0; } /* Правило 2.*/ b + i { color : #ff0000; } </style> </head> <body> <div class="myparentclass"> <p> Здесь <b>правило 1 действует.</b>.<span>Здесь <b>правило 1 тоже действует.</b></span> </p> <div> <p> Здесь <b>Правило 1 НЕ действует</b>, так как p не прямой потомок от <i>div с классом myparentclass.</i> </p> </div> </div> <a href="https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#combineselectors1">Статья с описанием видов селекторов CSS</a> </body> </html> |
В этой статье описаны только наиболее часто встречаемые виды селекторов. На самом деле их много больше. Вы можете найти про них в интернете, если столкнётесь с ними в реальной жизни. Я же пытаюсь создать простой и краткий учебник для быстрого старта.
Цикл статей «CSS учебник».
Следующая статья — «CSS цвет».
Предыдущая статья — «Синтаксис CSS».