Некоторые концепции для новичков: Как работают селекторы в CSS
Вы новичок в CSS? Тогда эта статья для вас! Возможно самый важный ключ к пониманию работы CSS - осознание принципов работы селекторов CSS. Селекторы это то, что позволяет обращаться к определенным элементам HTML и применять к ним стили. Давайте отвлечемся от самих стилей, чтобы сфокусировать все наше внимание на выборе элементов.
В примере, приведенном ниже, CSS будет содержаться в файле с именем style.css ссылка на который будет содержаться в HTML - документе с именем index.html. Это - два разных файла. И это - одна из важных особенностей CSS, хранение дизайна отдельно от разметки.
Вот как выглядит HTML - файл:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Мы изучаем селекторы!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>А CSS - файл будет содержать лишь блок селекторов, который мы видим ниже.
ID selector
CSS:
#happy-cake { }HTML:
<!-- БУДЕТ работать -->
<div id="happy-cake"></div>
<!-- БУДЕТ работать -->
<aside id="happy-cake"></aside>
<!-- НЕ БУДЕТ работать -->
<div id="sad-cake">НЕ ВЕРНЫЙ ID!</div>
<!-- НЕ БУДЕТ работать -->
<div class="happy-cake">Это не является ID!</div>Повышаем уровень
ID-селекторы наиболее весомый тип селекторов, если речь идет о CSS - спецификации. В теории они выбивают другие типы селекторов и стили. Звучит хорошо, но на практике не значит ничего хорошего, потому что хорошо, когда есть селекторы, которые при необходимости легко можно переопределить.
Селектор класса
CSS:
.module { }HTML:
<!-- БУДЕТ работать -->
<div class="module"></div>
<!-- БУДЕТ работать -->
<aside class="country module iceland"></aside>
<!-- НЕ БУДЕТ работать -->
<div class=".module">Точка для CSS, не для HTML</div>
<!-- НЕ БУДЕТ работать-->
<div class="bigmodule">Неверный класс</div>Повышаем уровень
Селекторы классов - наши друзья. Возможно, это самые используемые и универсальные селекторы. Отчасти потому, что они поддерживаются всеми браузерами.
Отчасти потому, что вы можете добавить несколько классов (разделяемых пробелами) для HTML-элементов. Отчасти потому, что есть некоторые JavaScript-трики, с помощью которых вы можете манипулировать классами.
Селектор тегов
CSS:
h2 { }HTML:
<!-- БУДЕТ работать -->
<h2>Привет, мама </h2>
<main>
<div>
<!-- Будет работать-->
<h2> Везде </h2>
</div>
</main>
<!-- НЕ будет работать-->
<div class="h2">Неверный тег, не сработает </div>
<!-- НЕ будет работать -->
<h2class="yolo"> Убедитесь, что после тега есть пробел! </h2>Повышаем уровень
Наибольшая польза от селекторов тегов ощущается при изменении свойств, которые являются уникальными для HTML - элемента. К примеру, установка list-style для элемента <ul> или tab-size для элемента <pre>. А также там, где нужно сбросить стили, которые браузер применяет к определенным элементам.
Но, не стоит излишне полагаться на них. Как правило, более полезно иметь класс определяющий стиль, который можно применять к любому HTML- элементу.
Селектор атрибутов
CSS:
[data-modal="open"] { }HTML:
<!-- БУДЕТ работать -->
<div data-modal="open"></div>
<!-- БУДЕТ работать -->
<aside class='closed' data-modal='open'></aside>
<!-- НЕ БУДЕТ работать -->
<div data-modal="false"> Неверное значение </div>
<!-- НЕ БУДЕТ работать -->
<div data-modal>Нет значения </div>
<!-- НЕ БУДЕТ работать -->
<div data-modal-open> Неверный атрибут </div>Повышаем уровень
Вы, конечно, можете возразить, что селекторы атрибутов более полезны, чем селекторы классов, потому что могут не только выбирать по наличию атрибута, но и по его точному значению.
Что ж, резонно, но учтите, что селекторы атрибутов НЕ поддерживаются в IE6.
Селекторы позиций
CSS:
:nth-child(2) { }HTML:
<ul>
<li>nope</li>
<!-- БУДЕТ работать-->
<li>yep, I'm #2</li>
<li>nope</li>
</ul>Повышаем уровень
Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = "каждый третий") вы можете выбирать элементы на основе их положения в HTML-документе. Вы можете поэкспериментировать с этой идеей здесь или же использовать несколько готовых рецептов.
Псевдо-селекторы
CSS:
:empty { }HTML:
<!-- БУДУТ работать -->
<div></div>
<!-- БУДУТ работать -->
<aside data-blah><!-- nothin' --></aside>
<!-- НЕ БУДУТ работать -->
<div> </div>
<!-- НЕ БУДУТ работать -->
<div>
</div>Повышаем уровень
:empty является одним из множества псевдо-селекторов, которые вы можете узнать по двоеточию (:). Как правило, они представляют собой нечто, что вы не сможете распознать по элементу или атрибуту по - отдельности.
Стоит отметить, что они немного отличаются от псевдо-элементов, которые вы можете распознать по двойным двоеточиям (::). Они ответственны за добавление элементов на страницу.
Повышаем уровень
Селекторы можно объединять:
CSS:
.module.news {
/* Выбирает элементы из этих классов */
}
#site-footer::after {
/* Добавляет контент после элемента с ID */
}
section[data-open] {
/* Выбирает только элементы раздела, если у них есть этот атрибут */
}Есть также комбинации селекторов, таких как ~ и + и > которые влияют на селекторы, следующим образом:
CSS:
.module > h2 {
/* Выбирает h2 элементы, которые являются прямыми потомками элемента этого класса */
}
h2 + p {
/* Выбирает элементы p которые следуют непосредственно за элементом h2 */
}
li ~ li {
/* Выбирает элементы li которые родственны (и следуют) за другими элементами li. */
}