Новичок
7 уроков
(1 час 8 минут)
Курс
Основы CSS
CSS - это язык стилей, определяющий отображение HTML-документов. После изучения HTML, вам необходимо ознакомиться с CSS, чтобы ваши сайты выглядели более привлекательно.

#2 — Селекторы CSS.

Добро пожаловать на второй урок нашего видеокурса по основам CSS. Сегодняшний видеоурок мы посвятим одному из самых важных понятий CSS — селекторам. Рассмотрим под микроскопом, на какие типы они подразделяются и как записываются.

Все селекторы CSS как на ладони

Различают следующие типы селекторов CSS:

  • 1) универсальные селекторы,
  • 2) селекторы по названию тега,
  • 3) селекторы по классу,
  • 4) селекторы по id,
  • 5) селекторы по атрибуту,
  • 6) селекторы потомков, или контекстные селекторы,
  • 7) селекторы дочерние (только первые),
  • 8) селекторы сестринские, или соседние (расположенные на одном уровне),
  • 9) селекторы псевдоклассов (селекторы состояния),
  • 10) селекторы псевдоэлементов.

На видеоуроке будет подробно рассмотрен каждый тип селекторов CSS в отдельности

Универсальные селекторы CSS

Универсальные селекторы CSS обозначаются обыкновенной звездочкой «*». Под звездочкой может подразумеваться любой элемент разметки HTML-страницы.

* {
font-size: 16px;
}

CSS селекторы по названию тега

Запись селекторов по тегам также не представляет из себя никакой сложности. Выглядит она следующим образом:

h1 {
color: red;
}

где h1 — селектор по названию тега.

CSS селекторы по классам

Следующими в нашем списке видов селекторов CSS идут селекторы по классам. Напомним,, что «class» — это атрибут HTML-тега, он очень удобен тем, что может применяться к однотипным элементам. Название класса может быть каким угодно, главное, чтобы оно соответствовало тому элементу, который описывается CSS-правилом. Вообще атрибут «class» считается самым главным инструментом CSS.
При создании CSS-правила точка «.» перед именем класса обязательна.

.main-header {
background-color: #99ffcc;
}

CSS селекторы по id

К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:

#heading {
font-size: 35px;
}

CSS селекторы по атрибутам

Далее будут рассмотрены CSS селекторы по атрибутам HTML-тегов. Их запись также не представляет особой сложности:

a[href = "https://loftblog.ru/"] {
color: black;
}

CSS селекторы потомков, или контекстные селекторы

Под CSS селекторами потомков, или контекстными селекторами подразумевается ситуация, когда один элемент HTML-страницы вложен в другой, причем не обязательно он должен быть первым потомком.

.wraping p {
padding: 15px;
}

Дочерние селекторы CSS

Дочерние селекторы CSS отличаются от селекторов потомков тем, что под дочерним подразумевается только первый потомок, никакие «внуки» и «правнуки» не попадают в эту категорию.

.wraping>p {
`padding: 15px;
}

Сестринские, или соседние селекторы CSS

При помощи сестринского селектора создается CSS-правило для HTML-элементов, расположенных на одном уровне, причем тот элемент, который записывается как сестринский должен быть самым ближайшим из себе подобных к тому элементу, к которому он записывается в «сестры».

h1 + p {
padding-bottom: 30px;
}

CSS селекторы псевдоклассов

К селекторам псевдоклассов относятся селекторы CSS, которые описывают состояния элементов при совершении над ними какого-либо действия. Это могут быть наведение на элемент курсора мыши, клик по элементу и т.п. Записываются они через двоеточие к элементу, к которому применяются.

a:hover {
text-decoration: none;
}

CSS селекторы псевдоэлементов

И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.

p::first-letter{
color: red;
}

Мы очень надеемся, что этот урок окажется весьма полезным для вас и послужит стимулом для дальнейшего изучения нашего видеокурса по основам CSS.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#2 — Селекторы CSS.

  1. Максим:

    Не пойму.ведь и контекстный селектор аналогично дочернему не действует на, например, как у меня, вложенные divы в div.я пока каждый div не обозначил соответствующим классом, родительский div действовал исключительно на свои элементы в контекстном селекторе

  2. traglazor:

    А почему псевдоэлемент был оформлен через двойное двоеточие?
    Спасибо!

Добавить комментарий

Рекомендуемые курсы