Селекторы css это: Что такое селекторы CSS.

Содержание

Комбинаторы — Изучение веб-разработки | MDN

Назад
Обзор: Building blocks
Далее

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

Необходимые условия:	Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:	Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.

Селектор потомка — обычно представляется символом пробела (» «) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.

д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

body article p

В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами

<article>, селектор пишется так:

article > p

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор — пробел) и все элементы <li>

получат верхнюю границу красного цвета.

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

p + img

Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h2>, и стилизуем его.

Если вы вставите какой-то другой элемент, например <h3> между <h2>

и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

p ~ img

В приведённом ниже примере мы выбираем все элементы <p>, которые идут после

<h2>, и хотя в документе есть также <div>, тем не менее <p>, который идёт после него, будет выбран.

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом «a», которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

ul > li[class="a"]  {  }

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа.

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

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.

Назад
Обзор: Building blocks
Далее

Каскад и наследование
Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
Модель коробки
Фон и границы
Обработка разных направлений текста
Переполнение содержимого
Значения и единицы измерения
Изменение размеров в CSS
Элементы изображений, форм и медиа-элементы
Стилизация таблиц

Отладка CSS
Организация вашей CSS

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

CSS селекторы, свойства, значения

Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.

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

Блок декларации содержит одну или несколько деклараций свойств, разделенных точкой с запятой. Блок деклараций заключают в фигурные скобки.

Каждая декларация состоит из имени свойства и его значения, разделенных двоеточием.

Свойства – это ключевые слова, такие как

color, font-weight или background-color, которым присвоены определенные значения:

body {
   font-size: 0. 8em;
   color: navy;
}

В данном примере создается CSS селектор body, который соотносится с HTML тегом <body>. В этом селекторе определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента <body> (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

CSS селекторы можно разделить на пять категорий:

Простые селекторы (элементы отбираются по имени, идентификатору или классу)
Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)

CSS селектор элемента

Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.

В следующем примере отбираются все существующие на странице элементы <p>. Их текст будет красного цвета и выровнен по центру:

p {
  text-align: center;
  color: red;
}

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

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

Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.

Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!

Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.

В следующем примере определяются стили для HTML элемента с идентификатором:

#para1 {
  text-align: center;
  color: red;
}

Внимание! Имя идентификатора не может начинаться с цифры!

CSS селектор класса

Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.

Чтобы определить селектор класса, нужно написать символ точки (.) и имя класса элемента.

В следующем примере все HTML элементы с классом будут отображать текст красного цвета, который выровнен по центру:

.center {
  text-align: center;
  color: red;
}

Так как один и тот же класс может присваиваться нескольким элементам, вы можете указать на какой именно HTML элемент должен влиять селектор класса.

В следующем примере только элементы <p> с классом будут отображать текст красного цвета, который выровнен по центру:

p.center {
  text-align: center;
  color: red;
}

Также, HTML элементы могут иметь больше одного класса.

В следующем примере элемент <p> будет принимать стили, соответствующие селекторам класса и:

<style>
p.center {
  text-align: center;
  color: red;
}
p.large {
  font-size: 300%;
}
</style>
<p>Этот параграф определен по двум классам.</p>

Внимание! Имя класса не может начинаться с цифры!

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

Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.

Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:

* {
  text-align: center;
  color: red;
}

Группирование селекторов

Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.

Посмотрите на следующий код CSS (для элементов h2, h3 и p заданы одинаковые стили):

h2 {
  text-align: center;
  color: red;
}
h3 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Чтобы уменьшить количество кода, мы можем сгруппировать эти селекторы в одну декларацию.

Чтобы сгруппировать селекторы, нужно в головной части перечислить их через запятую.

В следующем примере мы группируем селекторы из предыдущего примера:

h2, h3, p {
  text-align: center;
  color: red;
}

селекторов CSS3 | Список селекторов CSS3, псевдоселекторы CSS3

Автор: Авинаш Малхотра

Обновлено: 28 августа 2022 г.

← Учебник по CSS3
CSS-переменные и функции →

Оценка учебника по CSS3 от Yash ⭑ ⭑ ⭑ ⭑ ⭑ Средняя оценка: 5,0 на основе 186 отзывов

Дом
Веб-дизайн
CSS3
Селекторы CSS3

Селекторы CSS3
Рациональные селекторы
Селекторы атрибутов
Псевдоселекторы
Структурный псевдо

Селекторы CSS3

селектора CSS3 включает в себя все селекторов CSS от до CSS3. Список селекторов CSS3 включает селекторов Rational , Combinator , Группировка и Псевдоселекторы .

Более ранние версии CSS используют Type , class , id и дочерние селекторы . CSS 2 добавляет еще псевдоэлементов , псевдоклассов и селекторов комбинаторов . А теперь с помощью CSS3 мы можем нацеливаться практически на любой элемент с помощью широкого диапазона селекторов вариантов. Эван, в этой статье мы обновили CSS-селекторов уровня 4 .

Селекторы CSS3 являются частью HTML5.

Здесь мы подробно обсудим все селекторы CSS, CSS2, CSS2.1, CSS3 и CSS 4 уровня .

Список селекторов CSS

Рациональные селекторы
Селекторы атрибутов
Псевдоселекторы
Структурные псевдоселекторы

Нет селекторов для целевого родительского элемента и предыдущего родственного элемента в css.

Рациональные селекторы или комбинатор

Рациональные селекторы или Комбинатор нацеливаются на элементы на основе их связи с другими элементами. Эти селекторы были впервые представлены в CSS1, а затем снова в css2 и css3.

Рациональные селекторы CSS или комбинатор
Селектор	Код CSS	Использовать	CSS Уровень
Селектор потомков	раздел р{ }	Нацелить все теги p внутри div. Это включает в себя все элементы p, которые являются потомками ( дочерними элементами, внуками, правнуками и т. д.) div.	1
Детский селектор	дел.>р{ }	Этот селектор соответствует только прямому потомку из элемент	2
Смежный брат	h5+p{ }	Этот селектор соответствует тегу p рядом с h5, и оба имеют один и тот же родительский элемент . Это означает, что p должно идти сразу после h5.	2
Общий родственный	h4~p{ }	Этот селектор соответствует всем элементам P точно после элемента h4.	3

General Sibling т. е. ( A~B ) селектор будет работать только в браузерах с поддержкой HTML5. IE 8 и более ранние версии не поддерживают этот селектор.

Селекторы атрибутов

Селекторы атрибутов были введены в css level 2 или css2. Селекторы атрибутов нацеливают соответствующие элементы на основе атрибут и значение атрибута. Селекторы атрибутов используются с использованием квадратных скобок [] . Селекторы атрибутов могут нацеливаться на оба атрибута со значением или логическими атрибутами.

Селектор CSS Использовать Уровень CSS

E[атрибут]{}

Нацельтесь только на элемент E или элементы, имеющие точное значение атрибута без учета регистра.

Для ввода опыта с отключенным атрибутом,
ввод [отключено] {курсор: не разрешено}

E[attr=»значение»]{}

Этот селектор соответствует только элементу с точным атрибутом и значением. Для exp, только флажок типа ввода,
input[ type=»checkbox» ]

E[attr~=»foo»]{}

Этот селектор соответствует только элементам с точным атрибутом с несколькими значениями, разделенными пробелом, и одно из значений точно равно «foo». 9= «кол»]

E[attr$=»значение»]{}

Этот селектор соответствует только элементу E, значение атрибута которого заканчивается точно на foo. Например, div с именем класса, заканчивающимся на «wrap»,
div[ class$=»wrap» ]

E[атрибут*=»значение»]{}

Этот селектор соответствует только элементу E, значение атрибута которого содержит подстроку «foo».

Для exp, div, имеющий имя класса с подстрокой «md»,
раздел[класс*=»мд»]

E[attr=»value» i]{}

Этот селектор соответствует только элементу E со значением атрибута «value» или «VALUE». я имею в виду чувствительный к регистру. Для exp, div с именем класса «col» или «COL»,
div[i]

E[attr=»value» s]{}

Этот селектор соответствует только элементу E со значением атрибута, равным только «значению». Для exp, div с именем класса «col», 9=foo»]{} , E[attr$=foo»]{} и E[attr*=foo»]{} селекторы атрибутов будут только в поддерживаемых HTML-5 браузерах. IE 8 и младше не поддерживает эти селекторы.

Псевдоселекторы

Псевдоселекторы CSS классифицируются как Псевдокласс и Псевдоэлементы . Эти селекторы впервые появились в css1, а затем снова в css2 и css3. Псевдоселекторы CSS вызываются с использованием двоеточия : . В CSS3 мы используем двойные двоеточия :: для псевдоэлементов, но одинарное двоеточие также поддерживается.

Псевдоселекторы CSS
Код CSS	Использовать	Уровень CSS
Электронная почта: ссылка {}	Элемент E (якорь) с гиперссылкой, который еще не посещался .	1
E:посетили{}	Элемент E (якорь) с гиперссылкой, который уже посещался согласно истории браузеров.	1
Э: наведение {}	Изменить стиль при наведении курсора на состояние элемента E. Опыт	1 и 2
E:фокус {}	Изменить стиль на фокус состояние элемента E. Как правило, все элементы управления формой поддерживают состояние фокуса.	1 и 2
E:активный {}	Изменить стиль на нажатой клавише мыши состоянии элемента E.	1 и 2
: включить{}	Активный элемент пользовательского интерфейса. опыт	3
: отключить {}	Отключенный элемент пользовательского интерфейса. опыт <стиль> ввод [тип = "текст"]: отключен {курсор: не разрешено} :Введите страну	3
:только для чтения{}	Отключенный элемент пользовательского интерфейса. опыт <стиль> ввод [тип = "текст"]: только для чтения {курсор: не разрешено} :Введите страну	3
E:проверен{}	Для флажков и переключателей, которые отмечены или не отмечены. : Я согласен <стиль> ввод [ тип = "флажок"] ~ диапазон { цвет: красный } input[ type="checkbox"]:checked~span{color:green} : Я согласен : Мужчина : Женский <стиль> ввод [ тип = "радио"] ~ диапазон { цвет: красный } ввод [ тип = "радио"]: отмечен ~ диапазон { цвет: зеленый } : Мужской : женщина 9[0-9]{4}$" required maxlength="4">: введите PIN-код банкомата	3
: неверный {}	Применимо к элементам, которые являются недействительными в зависимости от их типа и шаблона. Для банкомата exp PIN-код: <стиль> ввод [тип = "текст"]: действителен { box-shadow: 0px 0px 5px 1px зеленый} ввод [тип = "текст"]: недействительный { box-shadow: 0px 0px 5px 1px красный} : введите PIN-код банкомата	3
: требуется {}	Применимо к элементам ввода, имеющим обязательный атрибут . Для exp Введите имя: <стиль> ввод: требуется { box-shadow: 0px 0px 5px 1px #ffae15 } : Введите имя	3
:необязательно{}	Применимо к элементам ввода, у которых нет обязательного атрибута . Для опыта Имя: <стиль> ввод: необязательный { box-shadow: 0px 0px 5px 1px #e83edb } : Введите имя	3
:в диапазоне{}	Применимо к диапазону и номер типа ввода элемент, когда значение находится в диапазоне . Для опыта введите возраст: <стиль> ввод: в диапазоне { box-shadow: 0px 0px 5px 1px зеленый}	3
:вне диапазона{}	Применимо к диапазон и номер типа ввода элемент, когда значение выходит за пределы диапазона . Для опыта введите возраст: <стиль> ввод: вне диапазона { box-shadow: 0px 0px 5px 1px красный }	3
: фокус внутри	:focus-in псевдоселектор выбирает элемент, когда дочерний элемент находится в фокусе. Фокус на входах ниже <стиль> .коробка{ граница: сплошная 1px; поле: 10 пикселей; отступ: 10 пикселей; фон:#fff; } .box:фокус внутри{ фон:#5c97d5; }	4
: цель	:целевой псевдоселектор сек 1 сек 2 Секунда 3 Секунда 1 Секунда 2 Секунда 3 <стиль> . раздел{ фон:#ccc; граница: сплошная 1px; отступ: 10 пикселей; поле: 10 пикселей; } .section:target{фон:#333; цвет:#fff} Секунда 1 Раздел 2 Раздел 3 Раздел 1 Раздел 2 Раздел 3	3

Совместимость с браузерами

:hover не поддерживается в IE6 и ниже. IE7 и ниже не поддерживает :focus . Однако все селекторы уровня 1 и уровня 2 поддерживаются в IE8, кроме ( :checked, :enabled, :disabled и :target ). Хорошей новостью является то, что IE9 и выше поддерживают все селекторы CSS уровня 1, 2, 3 и 4.

Структурные псевдоклассы

Структурные псевдоселекторы могут нацеливаться на любой элемент на основе их положения в узлах. Впервые они были введены в css1, а затем снова в css2 и css3.

Код CSS	Использовать	Уровень CSS
E:корень	Элемент E, корень документа.	2
:первый ребенок	Цели только первый дочерний элемент Родительский элемент. Для опыта Список 1 Список 2 Список 3 <стиль> уль ли: первый ребенок { цвет: # a94442} <ул> Список 1 Список 2 Список 3	2
: первая линия	Нацеливается только на первую строку элемента. Для опыта, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus delectus recusandae nisi dolore tenetur doloremque voluptas, ad inventorye earum quos harum illo mollitia magnam velit cum asperiores. Earum, voluptatem. <стиль> p: первая строка {цвет: красный} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit magnam ad architecto magni optio alias quibusdam aliquam incidunt eligendi tempore quam nobis nisi non, similique minus, nihil deleniti neque.	1
: первая буква	нацелен только на первую букву элемента, для расширения, Lorem ipsum dolor sit amet. <стиль> р: первая буква { цвет: красный; размер шрифта: 2em} Lorem ipsum dolor sit amet.	1
:последний ребенок	Цели только последний дочерний элемент Родительский элемент. Для опыта Список 1 Список 2 Список 3 <стиль> ul li: последний ребенок {цвет: # a94442} <ул> Список 1 Список 2 Список 3	3
:n-й ребенок(n)	Нацелен только на n-й дочерний элемент родительского элемента. n — числовое значение. Для опыта Список 1 Список 2 Список 3 Список 4 Список 5 <стиль> ul li:nth-child(2){ цвет:#a94442} ul li:nth-child(5){color:#31708f} <ул> Список 1 Список 2 Список 3 Список 4 Список 5	3
:n-й ребенок (нечетный)	Нацелен только на нечетный дочерний элемент родительского элемента. n — числовое значение. Для опыта Список 1 Список 2 Список 3 Список 4 <стиль> ul li:nth-child(нечетный){color:#a94442} <ул> Список 1 Список 2 Список 3 Список 4	3
:n-й ребенок (четный)	Цели только даже дочерних элементов родительского элемента, т.е. 2,4,6 и т.д. Для опыта Список 1 Список 2 Список 3 Список 4 <стиль> ul li: nth-child (четный) { color: # a94442} <ул> Список 1 Список 2 Список 3 Список 4	3
:n-й тип(n)	Нацелен только на n-й родственный элемент типа n, начиная с первого. Для опыта Список 1 Список 2 Список 3 Список 4 Список 5 Список 6 Список 7 <стиль> ul li:nth-of-type(3n+1){color:#a94442} <ул> Список 1 Список 2 Список 3 Список 4 Список 5 Список 6 Список 7	3
:n-последний тип(n)	Нацеливается только на n-й братский элемент элемента, начиная с последнего. Для опыта Список 1 Список 2 Список 3 Список 4 Список 5 Список 6 Список 7 <стиль> ul li:nth-last-of-type(3n){color:#a94442} <ул> Список 1 Список 2 Список 3 Список 4 Список 5 Список 6 Список 7	3
:не()	нацелен на все элементы, кроме нефункционального. Список 1 Список 2 Список 3 Список 4 <стиль> ул ли {цвет: # 31708f} ul li: not (: nth-child (1)) { цвет:#a94442; } <ул> Список 1 Список 2 Список 3 Список 4	3
:пусто	Элемент, не имеющий дочернего элемента . Для опыта Это пункт с содержанием. Еще один пункт с содержанием. <стиль> p: пусто { граница: сплошная 2 пикселя красная} Это пункт с содержанием Еще один абзац с содержанием.	3
:язык()	Элемент, имеющий атрибут языка с заданным значением. Для опыта Привет друг, как дела? Hola amigo, ¿cómo se hase? <стиль> :lang(es){ цвет:красный; стиль шрифта: курсив} Это пункт с содержанием Hola amigo, ¿cómo se hase?	3
:дир(л)	Элемент, имеющий атрибут dir с заданным конкретным значением, указанным внутри. Для опыта Привет друг, как дела? `ہیلو دوست، آپ کیسے ہیں؟` <стиль> :dir(ltr){ цвет:синий;} : каталог (rtl) { цвет: красный;} Это пункт с содержанием >ہیلو دوست، آپ کیسے ہیں؟	4

:first-child , :first-letter , :first-line будут поддерживаться в IE 7 и 8. Но селекторы уровня 3 будут поддерживаться только в браузерах IE 9 и выше.

Псевдоэлементы

Псевдоэлементы используются с использованием двойных двоеточий, т.е. :: селектор. Как и :before или ::before, оба одинаковы в CSS3. Например, p:first-line или p::first-line.

Селектор

Использовать

Уровень CSS

::заполнитель

Чтобы изменить цвет заполнителя

:: заполнитель { цвет: светло-голубой}

::выбор

Для оформления выделенного текста.

Выберите этот текст для проверки выбора по умолчанию

Выберите этот текст для проверки ::selection

::выбор{
    фон:#333;
    цвет:#fff;
}
::-moz-выбор{
    фон:#333;
    цвет:#fff;
}

← Учебник по CSS3
CSS-переменные и функции →

селекторов CSS — Темы масштабирования

Обзор

Чтобы стилизовать элементы HTML, нам нужно применить к ним CSS, а чтобы применить любое свойство CSS к любому элементу HTML, нам сначала нужно выбрать этот элемент HTML, а затем применить к нему свойства CSS. Мы достигнем этого с помощью селекторов CSS. Селекторы CSS — это комбинация символов, которая сообщает браузеру, какой элемент HTML выбрать. Селекторы CSS являются частью набора правил CSS. Селекторы CSS используют идентификатор, класс, тип, атрибут и т. д. элемента HTML для их выбора.

Объем статьи

В этой статье вы подробно узнаете о селекторах CSS и с примерами кода
Вы узнаете о различных типах селекторов CSS, таких как базовые (универсальные, тип, класс, идентификатор), атрибуты, группировка, комбинаторы и псевдоселекторы (класс и элемент).

Что такое селектор в CSS?

Селекторы CSS представляют собой комбинацию символов и специальных символов, которые предписывают браузеру применить определенные свойства CSS к желаемому элементу HTML. Селекторы CSS используют имя идентификатора (начинается с #), имя класса, тип тега HTML (например, заголовок, div и т. д.), атрибут и т. д. элемента HTML для их выбора. HTML-элементы, выбранные селектором, называются предметом селектора.

Типы селекторов

Базовые селекторы CSS

1. Универсальный селектор Самый первый селектор CSS, который мы будем обсуждать, будет универсальным селектором. Он выбирает все HTML-элементы, присутствующие на HTML-странице. Чтобы использовать универсальный селектор, нам нужно использовать звездочки (*) , а затем определите свойство CSS, и после этого будут выбраны все элементы. Элементы HTML внутри других элементов также будут выбраны с помощью универсального селектора CSS. (например, если внутри элемента div есть элемент абзаца, то с помощью универсального селектора CSS также будет выбран элемент para, который находится внутри элемента div)

Синтаксис

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

Выход

2. Селекторы типов

Селектор типа также известен как селектор элементов, поскольку он выбирает HTML-теги/элементы в вашем документе. Селектор элементов выбирает элементы HTML на основе их имени, некоторые из них: p (тег абзаца), h2 (заголовок 1), div (тег раздела), span и т. д. Чтобы использовать селектор типа, вам просто нужно указать имя тега HTML, а затем в фигурных скобках определить свойства CSS.

Синтаксис

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