Типы селекторов
Типы селекторов
«Типы селекторов» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение
Здравствуйте!
На этом уроке мы углубим знания CSS с помощью более сложных селекторов.
Несколько определений стилей
Можно задать несколько определений стилей, разделив их точками с запятой.
.first{
color:blue;
font-size:20px;
text-align: center;
}HTML-документ становится сложнее
До сих пор мы работали с простыми селекторами тегов, идентификаторов и классов. Но в некоторых случаях, когда пользовательский интерфейс становится сложнее, нам потребуется использовать более сложные селекторы.
В примере ниже представлен более сложный HTML-документ.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>Разбор примера
Теперь разберём наш код.
- Внутри тела страницы находится div с идентификатором my-area, который служит контейнером. Он является предком всех элементов внутри этого div.
- Элемент p с классом first является соседним элементом div с классом second.
- Третий элемент является дочерним элементом второго элемента, а элемент my-area можно считать предком третьего элемента.
Предупреждение
Представляйте структуру HTML как настоящее генеалогическое древо.
Вы можете унаследовать некоторые признаки от своего деда.
Но если это наследование изменится на уровне отца, ген отца окажется более доминирующим, и признак, унаследованный от деда, изменится.
Комбинации селекторов
Теперь посмотрим, как создавать комбинации селекторов.
Следующая запись означает, что элемент с классом second является потомком (дочерним элементом или внуком) элемента с классом third.
Если между двумя классами стоит пробел, это означает, что класс слева ищет своего потомка.
.second .third{
color:red;
}Селектор дочернего элемента
В примере ниже
нужно выбрать класс third, который является дочерним элементом класса second.
Знак «больше» означает выбор дочернего элемента соответствующего элемента.
.second > .third{
color:red;
}Можно объединить селекторы тега и класса, чтобы выбрать элемент
Также можно объединить селекторы тега и класса, чтобы выбрать элемент.
В примере ниже будут выбраны элементы p с классом third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Предположим, мы хотим выбрать div с классом first
Предположим, мы хотим выбрать div с классом first.
В примере ниже выбирается элемент с классом first, который является дочерним элементом div с идентификатором my-area.
Это повышает специфичность выбираемого элемента.
div#my-area > .first{
color:red;
}Выбор всех элементов
Звёздочка (*) играет важную роль среди селекторов.
Она означает выбор всех элементов.
В примере ниже селектор означает, что элемент с идентификатором my-area должен выбрать всех потомков.
Важно понимать, что выбираются не только дочерние элементы, а все потомки.
Если бы мы хотели выбрать только дочерние элементы, нужно было бы поставить знак «больше» перед звёздочкой.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Селектор соседнего элемента
Мы использовали селектор потомков и селектор дочернего элемента, а теперь изучим селектор соседних элементов.
Селектор соседнего элемента использует знак + для выбора следующего соседнего элемента.
В нашем примере этот селектор окрасит цвет фона третьего элемента абзаца в жёлтый.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Селектор всех соседних элементов
Если нужно выбрать не только ближайший следующий соседний элемент, но и всех следующих соседей, используется знак тильды (~).
Символ тильды также известен как комбинатор последующих соседних элементов.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Псевдоклассы и классы CSS
Выражения, которые не являются классами, но ведут себя подобно классам, называются псевдоклассами.
Мы не задаём псевдоклассы каким-либо элементам в HTML.
Когда браузер интерпретирует код, он предполагает, что они существуют. Поэтому мы можем использовать псевдоклассы в селекторах CSS.
Псевдокласс :hover
Среди псевдоклассов :hover, несомненно, является самым известным.
Hover (:hover) — это псевдокласс, который браузер автоматически назначает соответствующему элементу, когда указатель мыши находится над ним.
Псевдоклассы используются после символа двоеточия (:) в записи селектора.
Синтаксис использования псевдокласса показан ниже.
selector:pseudo-class {
property: value;
}Оформление ссылок с помощью :hover
Теперь создадим ссылку и посмотрим, как она будет выглядеть при наведении указателя.
Предупреждение: поскольку на мобильных устройствах нет события наведения, как в веб-браузере, этот эффект не будет отображаться в мобильных приложениях CoddyKit.
В примере ниже посмотрим, как при наведении мыши цвет ссылки станет зелёным.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Псевдокласс :first-child
Одним из самых запутанных псевдоклассов является :first-child.
Обычно по названию можно предположить, что он выбирает первый дочерний элемент элемента.
На самом деле это предположение неверно.
Он используется для выбора первого элемента среди соседних элементов данного элемента.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Псевдокласс :last-child
last-child является противоположностью псевдокласса first-child. Он используется для выбора последнего элемента среди соседних элементов.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Псевдоэлемент ::before
Если нужно добавить что-либо перед элементом, используется псевдоселектор ::before.
В примере ниже мы добавили содержимое «Hello» перед элементами заголовков.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Псевдоэлемент ::after
Псевдоэлемент ::after, являющийся противоположностью псевдоэлемента ::before, используется для добавления нового содержимого после элемента.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Список псевдоклассов
Мы изучили наиболее часто используемые псевдоклассы. Однако существуют ещё десятки других.
Список всех псевдоклассов можно открыть по ссылке ниже. Используйте любой из них, когда это необходимо.
Поздравляем
Поздравляем! 🎉
В этом разделе мы изучили типы селекторов.
В следующем разделе мы изучим наиболее часто используемые свойства CSS
Часто задаваемые вопросы
Урок «Типы селекторов» бесплатный?
Да — полный текст урока «Типы селекторов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Типы селекторов»?
Типы селекторов Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Типы селекторов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.