Селекторы css, что такое дочерние, вложенные, соседние, псевдоклассы
Без селекторов задавать стили для элементов html-страницы очень сложно. Необходимо было бы прописывать стили с помощью атрибута style у каждого элемента, это нерационально и долго. Существование селекторов и файла CSS существенно упрощает задачу. В этом css-уроке разберемся с тем, какие же существуют селекторы.
Селекторы по тегу, классу и id
Этот тип селекторов указывает на все элементы страницы с определенным тегом. Чтобы прописать стили по тегу, необходимо взять название тега и в фигурных свойствах отметить все свойства для них. Что касается селектора по классу, то необходимо указать сначала название класс, а потом в фигурных скобках css-свойства для него. Для селектора по id ситуация идентичная.
Например, пропишем свойства для всех абзацей на странице и для последнего из абзацей по классу перебьем значение отступа снизу:
<div> <p>...</p> ... <p>...</p> </div>
p {
margin-bottom: 10px;
color: #000;
font-size: 14px;
}
.last {
margin-bottom: 25px;
}
Вложенные и соседние селекторы
Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.
Например, добавим стили для абзацей контентной части. В этом случае стили, которые заданы у вложенного в блок абзаца перебьют общие стили для всех абзацей. Таким образом мы не плодим лишние классы, а обходимся компактной конструкцией.
<div>
<p>...</p>
...
<p>...</p>
</div> p {
margin-bottom: 10px;
color: #000;
font-size: 14px;
}
.content p {
color: #eee;
font-size: 16px;
matgin-bottom: 15px;
}Еще одна полезная фишка для удобства — это использование соседних селекторов. Слева направо через знак плюс прописываем два селектора. Стили, указанные в фигурных скобках, применяются к последнему селектору только в случае, если он стоит после первого.
Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:
<div>
<p>...</p>
<p>...</p>
</div>.first + .sec {
margin-top: 20px;
}
Вложенные и соседние селекторы можно комбинировать. Если зададим в примере перед конструкцией .first + .sec класс .content, то свойства применяются для второго класса в случае, если он идет после первого и они оба лежат в блоке с классом
Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков
С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками. При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е. для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.
В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.
<div>
<span>...</span>
<p>
<span>...<span>
</p>
<p>...</p>
</div>
.content > span {
...
}Псевдоклассы
Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:
Вложенные селекторы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 4.0+ | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут вложенные селекторы. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Синтаксис
E F { Описание правил стиля }
Здесь E это родительский тег, а F — дочерний тег, расположенный в контейнере <E>. В этом случае стиль будет применяться к тегу <F>, когда соблюдается следующий код <E><F></F></E>. Не обязательно должно быть два тега, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {…}.
Пример
HTML5CSS 2.1IE CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
p b {
font-family: Times, serif; /* Семейство шрифта */
font-weight: bold; /* Жирное начертание */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста
и выделенное цветом</b></p>
</body>
</html> В данном примере показано обычное применение тега <b> и этого же тега, когда он вложен внутрь абзаца <p>.
Браузеры
В браузере Internet Explorer версии 6 и ниже не работает комбинация контекстных селекторов и псевдокласса :hover. Например, стиль для селекторов p b:hover или a:hover span применяться не будет.
Вложенные селекторы | CSS | WebReference
При создании веб-страницы часто приходится вкладывать одни элементы внутрь других. Чтобы стили для этих элементов использовались корректно, помогут вложенные селекторы. Например, задать стиль для <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного элемента, а также для элемента, который находится внутри другого.
Синтаксис ?
E F { Описание правил стиля }Здесь E это родительский элемент, а F — дочерний элемент, расположенный в контейнере <E>. В этом случае стиль будет применяться к элементу <F>, когда соблюдается следующий код <E><F></F></E>. Не обязательно должно быть два элемента, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {…}.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
p b {
font-family: Times, serif; /* Семейство шрифта */
font-weight: bold; /* Жирное начертание */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста
и выделенное цветом</b></p>
</body>
</html>В данном примере показано обычное применение элемента <b> и этого же элемента, когда он находится внутри текстового абзаца <p>.
Примечание
В браузере Internet Explorer версии 6 и ниже не работает комбинация вложенных селекторов и псевдокласса :hover. Например, стиль для селекторов p b:hover или a:hover span применяться не будет.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Вложенные таблицы стилей. Уроки CSS.
Подготовил: Александр Головко Дата публикации: 30.12.2010Последнее обновление: 05.01.2011
Вторая статья из цикла «подключение CSS» посвящена вложенным таблицам стилей
. Вложенные таблицы обладают существенно большей гибкостью, чем встроенные стили.Во-первых, это уже полноценная таблица стилей в которой можно писать любые допустимые правила (ты, конечно, помнишь, что встроенные стили содержали только часть правила — список определений для какого-нибудь конкретного элемента).
Во-вторых, опять таки, в отличие от встроенных стилей, правила не разбросаны по всему HTML, а сгруппированы в единый логических блок с которым удобно работать.
Ключ к вложенным таблицам — тег style
Знакомься, тег style:
- должен располагаться в секции head;
- содержимое тега представляет собой таблицу стилей, применяющуюся к документу;
- в одном документе может быть несколько тегов style.
Пример применения:
<head>
<title>Заголовок окошка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,body {
height: 100%;
}
img {
border: none;
}
ul{
list-style: none;
}
:focus{
-moz-outline-style:none;
}
-->
</style>
</head>
Атрибуты тега style
Обрати внимание, у тега присутствует атрибут type=»text/css», который сообщает браузеру, что содержимое — таблица стилей.
Так же можно задать атрибут media, который позволяет применять таблицу стилей только для определенных устройств отображения. Например:
<style type="text/css">
<!--
body {
background:url(grad.png) repeat-x;
}
/* на мониторе сайт будет иметь какой-нибудь красиывй фон */
-->
</style>
<style type="text/css" media="print">
<!--
body {
background:none;
}
/* а при выводе на устройство печати фон отключаем */
-->
</style>
Обратная совместимость
Ты, наверное, уже заметил, что в приведенных выше примерах содержимое тега style взято в HTML комментарии. Зачем? Все очень просто. Некоторые особо старые браузеры (я сейчас не имею в виду IE6) могут не понимать этот тег. Тогда они сам тег преспокойненько пропустят, а все его содержимое запросто могут вывести на экран.
Хотя по-идее содержимое находится в секции head и отображаться все же не должно, но кто ж их знает, этих древних браузеров! Не исключено, что в каменном веке выводилось на экран не только содержимое тега body! В общем, безопасным считается взять всю таблицу в комментарии. Тогда уж точно ни один питекантроп не увидит CSS кода вверху страницы.
Недостатки вложенной таблицы
Достоинства, по сравнению с встроенными стилями, были описаны в самом начале. Теперь пришла пора добавить ложку дегтя. Нормальную такую ложку. Половник.
Главное ограничение четко звучит в самом названии — «вложенная таблица». Тег style, расположенный в секции head, навеки впечатал такой CSS в HTML файл! Что же это получается? Если у меня на сайте несколько сотен страниц сделанных под единое оформление, то в каждую нужно вставить одинаковый код таблицы (возможно десятки килобайт)? Фактический объем сайта раздуется неимоверно. А какая работа мне предстоит, если я захочу, допустим, поменять на всех страницах цвет фона, даже и подумать страшно! Правда, с повсеместным распространением движков на базе шаблонов, это уже не может считаться недостатком.
Тем не менее, получаем ту же проблему, что и при встроенных стилях, только в масштабе не отдельной страницы, а всего сайта в целом!
Не волнуйся — решение существует! Самый правильный и удобный вариант заключается в том, чтобы для подключения CSS использовать внешние таблицы стилей.
Область применения
А для чего же тогда вложенные? Их удобно применять там, где стили уникальны для данной страницы и составляют с HTML единый компактный блок. Вот, например, на нашем сайте, на всех демонстрационных примерах (там, где они вынесены на отдельную страницу) используется вложенная таблица стилей. Это удобно. Пользователь открыл один файл и сразу увидел весь интересующий его код.
Еще один вариант — это критические, с точки зрения быстродействия, участки. Все-таки один файл с HTML и вложенной таблицей загрузиться быстрее, чем два (если CSS храниться отдельно и за ним придется еще раз «ходить» на сервер).
Резюме
Подключение CSS с помощью вложенных таблиц стилей имеет очень ограниченную область применения. В реальных проектах такое подключение без необходимости лучше не использовать.
CSS3 | Селекторы потомков
Селекторы потомков
Последнее обновление: 21.04.2016
Веб-страница может иметь сложную организацию, одни элементы внутри себя могут определять другие элементы. Вложенные элементы иначе можно назвать потомками. А контейнер этих элементов — родителем.
Например, пусть элемент body на веб-странице имеет следующее содержимое:
<body> <h3>Заголовок</h3> <div> <p>Текст</p> </div> </body>
Внутри элемента body определено три вложенных элемента: h3, div, p. Все эти элемены являются потомками элемента body.
А внутри элемента div определен только один вложенный элемент — p, поэтому элемент div имеет только одного потомка.
Используя специальные селекторы, мы можем стилизовать вложенные элементы или потомков внутри строго определенных элементов. Например, у нас на странице могут быть параграфы внутри блока с основным содержимым и внутри блока футера. Но для параграфов внутри блока основного содержимого мы захотим установить один шрифт, а для параграфов футера другой.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы CSS</title>
<style>
#main p{
font-size: 16px;
}
#footer p{
font-size: 13px;
}
</style>
</head>
<body>
<div>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<div>
<p>Текст футера</p>
</div>
</body>
</html>
Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:
#main p{
font-size: 16px;
}
То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.
Рассмотрим другой пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы CSS</title>
<style>
li .redLink{
color: red;
}
</style>
</head>
<body>
<ul>
<li>Самсунг: <a>Galaxy S7 Edge</a></li>
<li>Apple: <a>iPhome SE</a></li>
<li>LG: <a>LG G5</a></li>
<li>Microsoft: <a>Lumia 650</a></li>
</ul>
</body>
</html>
Здесь стиль применяется к элементам с классом «redLink», которые находятся внутри элемента <li>. И соответственно браузер
окрасит эти элементы в красный цвет:
Но обратите внимание на пробел: li .redLink. Данный пробел играет большое значение и указывает как раз, что элементы с классом
redLink должны быть вложенными по отношению к элементу <li>
Но если мы уберем пробел:
li.redLink{
color: red;
}
то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам <li>, которые имеют класс redLink.
Например, к следующему элементу:
<li>Microsoft: <a>Lumia 650</a></li>
Но никак не к элементу:
<li>LG: <a>LG G5</a></li>
Подключаем CSS тегом style (вложенные таблицы стилей)
Одним из основных преимуществ вложенных таблиц является то, что они представляют собой полноценную таблицу CSS, а в неё уже можно прописывать все правила без каких либо ограничений.
Напомним, что в отличие от вложенных таблиц, встроенные стили могут содержать только определённые правила, которые лимитируются тэгом, к которому они применяются.
Следующим преимуществом, является их расположение. Если в встроенных они разбросаны по всему html документу, то в вложенных таблицах они сконцентрированы в одном месте, а значит с кодом будет в случае чего, легче работать.
Как это выглядит?
Для того чтобы создать таблицу стилей в html документе нам понадобится тег style, а внутри него прописываются стили, таким же образом как и в css. Однако и тут не обошлось без правил и ограничений:
- Он должен располагается непосредственно в head документа;
- Их количество в документе не ограниченно;
Пример:
<html>
<head>
<meta charset="windows-1251">
<title>Сайт</title>
<style type=”text/css”>
p {
color:#000
}
.left a {
text-decoration: underline;
}
</style>
</head>Атрибуты, которые можно использовать с style
В примере, описанном выше, к тегу style добавили атрибут type с значением type/css. Этот атрибут был необходим для корректной работы браузера с таблицей. Стоит обратить внимание, что в качестве значения по умолчанию выступает type/css, ну и что необходимость в использовании этого атрибута пропала уже в HTML5.
Следующим атрибутом, с которым может работать тег style, является media. Этот атрибут даёт возможность применять таблицу стилей для уточнённого устройства.
Например:
<head>
<meta charset="windows-1251">
<title>Сайт</title>
<style media=”handheld“>
p {
color:#000
}
.left a {
text-decoration: underline;
}
</style>
</head>Данный пример рассчитан на HTML5, в котором не нужен атрибут type, а также, с помощью атрибута media мы определили устройства, на которых будут применены стили.
Недостатки
В самом начале мы рассмотрели достоинства использования вложенных таблиц стилей. Теперь стоит обратить внимание на недостатки.
Недостаток всплывает на проектах имеющих несколько страниц. Ведь нам придётся на каждой прописывать заново нашу таблицу стилей, а это увеличивает вес сайта. Также стоит задуматься, если нам необходимо заменить на всех страницах какой-то элемент стиля, то нам придётся это делать отдельно для каждой страницы. Правда, задачу могут упростить движки с шаблонами.
Из-за этого недостатка внешние таблицы получили большую распространённость.
Область применения
- Первый вариант, один из самых распространённых, это наложение уникальных стилей на определённой странице. Например, нам необходимо, чтобы на одной странице подсвечивался конкретный раздел списка:
<head> <style> #block li:nth-child(2) a { background: #1F2226; padding: 20px; color: #fff; } </style> </head> - Вторым вариантом является ускорение быстродействия на «тяжёлых» участках сайта. Это объясняется тем, что браузеру не приходится грузить несколько файлов.
Важно
В своих проектах лучше обойтись без использования вложенных таблиц. Поэтому если есть возможность обойтись без них, то лучше этой возможностью воспользоваться.
Оценок: 3 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
Селекторы CSS | CSS
CSS селекторы позволяют установить связь одного правила с определенным элементом HTML. А также, чтобы задавать стили для отдельных элементов, игнорируя другие:
В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.
Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Селекторы CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h2> Селекторы CSS</h2>
<p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</body>
</html>Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.
Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:
- Указанный атрибут класса в элементе HTML;
- Соответствующий селектор классов CSS.
Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:
<p> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>
Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:
.synopsis {
color: #7E8184; /* Светло серый */
font-style: italic;
}Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:
Значение атрибута класса HTML может представлять собой почти все, что угодно, если оно соответствует селектору в коде CSS. Стандартная конвенция имен классов — это использование прописных букв и дефисов вместо пробелов, как в именах файлов и папок.
Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.
Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:
Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:
.button {
color: #FFF;
background-color: #5995DA; /* Синий */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Темно-серый */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:
<div>Кнопка Один</div>
Данный код позволяет использовать стили и для других элементов, а не только для кнопок.
Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:
Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:
<body>
<div> <!-- Добавьте это -->
<h2> Селекторы CSS</h2>
<p >Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны,, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</div> <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
width: 600px;
margin: 0 auto;
}Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства. Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:
Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.
Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.
Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа. Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:
<div>Кнопка Один</div> <div>Кнопка Два</div>
В результате этого мы получим вторую кнопку, которая выглядит так же, как и первая. Это значительно упрощает работу веб-разработчиков. Если мы когда-нибудь захотим изменить цвет кнопки, нужно будет сделать это только в одном месте, и все наши кнопки автоматически обновятся:
Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:
Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:
<div>Кнопка Два</div>
Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* Желтый */
}Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:
- Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
- Переопределение существующего в классе .button стиля — background-color.
Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.
Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.
Другими словами, следующие элементы эквивалентны:
<!-- В результате элементы будут отображаться на странице одинаково --> <div>Кнопка Два</div> <div>Кнопка Два</div>
Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.
Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:
Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:
.synopsis em {
font-style: normal;
}Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:
Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:
h2 em {
/* определенные стили */
}Можно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так:
/* Старайтесь избегать такого */
.article h3 .subheading em {
/* Конкретные стили */
}Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:
<div>
<h3>
<span>Это <em>на самом деле</em> особенный текст.</span>
</h3>
</div>Если захотите применить эти стили к заголовку <h3>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h4>.
До сих пор все селекторы CSS, которые мы рассматривали, были связаны непосредственно с фрагментами HTML-разметки. Тем не менее, на отображаемой веб-странице происходит больше, чем задает HTML-контент. Существует «стандартный» перечень действий, которые может предпринять пользователь.
Классический пример — это ссылка. Веб-разработчик создает элемент <a href>. После того как браузер отобразил его, пользователи могут взаимодействовать с этой ссылкой: навести на нее курсор мыши, кликнуть ссылку и перейти по ней:
Псевдоклассы CSS предоставляют механизм для подключения к таким действиям пользователя. В любой момент времени элемент <a href> может находиться в нескольких состояниях, и можно использовать псевдоклассы для определения отдельных стилей для каждого из этих состояний. Можно представить их как селекторы классов, которые не нужно писать самостоятельно, потому что они встроены в браузер.
В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:
- :link — ссылка, по которой пользователь еще не переходил;
- :visited — ссылка, по которой пользователь переходил раньше;
- :hover — ссылка, на которую пользователь навел курсор мыши;
- :active — ссылка, нажатая мышью (или пальцем).
Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited, когда мы изменим атрибут href на URL-адрес, который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.
Добавьте это правило ниже предыдущего фрагмента кода:
a:visited:hover {
color: orange;
}Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она «перекрашивается» в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS, о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.
Можно исправить это с помощью CSS псевдоселектора a:visited:active. Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action, порядок, в котором правила определяются в файле styles.css, имеет значение:
a:visited:active {
color: red;
}Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.
Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button. Это позволит создавать кнопки, которые ведут куда-то.
Сначала нужно изменить кнопки, чтобы они стали элементами <a href>, а не просто элементами <div>, как показано ниже:
<a href='nowhere.html'>Кнопка Один</a> <a href='nowhere.html'>Кнопка Два</a>
Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что <a> является встроенным элементом, а также имеет значение цвета по умолчанию:
Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.
Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:
.button:link, /* Измените это */
.button:visited { /* Измените это */
display: block; /* Добавьте это */
text-decoration: none; /* Добавьте это */
color: #FFF; /* Все остальное остается без изменений */
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active:
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.
Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.
Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):
.call-to-action:link,
.call-to-action:visited {
font-style: italic;
background-color: #EEB75A; /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
background-color: #F5CF8E; /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
background-color: #EEB75A; /* Желтый */
}Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.
Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.
Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:
p:last-of-type {
margin-bottom: 50px;
}Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:
Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:
p:first-of-type {
color: #7E8184;
font-style: italic;
}Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.
Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.
У нас есть один общий <div>, который обертывает контент (.page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:
<div> <p>If this page had a sidebar...</p> <p>We’d have some problems with pseudo-classes.</p> </div>
Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.
Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:
.page > p:first-of-type {
color: #7E8184;
font-style: italic;
}Различные разработчики придерживаются разных «школ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента.
CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.
Вместо атрибута class для любого элемента HTML, используется атрибут id. Попробуйте добавить идентификатор ко второй кнопке:
<a href='nowhere.html'>Кнопка Два</a>
Соответствующий селектор CSS должен начинаться с символа хэша (#). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:
#button-2 {
color: #5D6063; /* Dark gray */
}Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id. Довольно скоро наш CSS начнет выглядеть довольно «грязно»:
/* (Это тяжело поддерживать) */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
color: #5D6063;
}По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов.
Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:
Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:
<!-- С той же страницы --> <a href='#button-2'>Go to Button Two</a> <!-- С другой страницы --> <a href='selectors.html#button-2'>Go to Button Two</a>
Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:
Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.
Порядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом:
Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.
Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:
.call-to-action:link,
.call-to-action:visited {
background-color: #D55C5F; /* Красный */
}Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:
#button-2 {
background-color: #D55C5F; /* Красный */
}CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:
Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:
• #button-2 • .button:link и .synopsis em (они равнозначны) • .button • a:link • a
Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.
В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.
Данная публикация представляет собой перевод статьи «css selectors» , подготовленной дружной командой проекта Интернет-технологии.ру