In css: Универсальные селекторы - CSS

Содержание

CSS-селекторы. Шпаргалка для новичков — журнал «Доктайп»

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

Основные селекторы

Селекторы типа выбирают элементы HTML-документа по их тегу. Например, селектор p выберет все <p> на странице:

<body>
  <p>Текст</p>
  <p>Другой текст</p>
</body>

p {
  font-size: 16px;
}

Селекторы класса определяют стиль элементов с определённым классом. Например, этот селектор выберет абзац с классом .highlight.

<body>
  <p>Текст</p>
  <p>Другой текст</p>
</body>

.highlight {
  background-color: yellow;
}

Селекторы идентификатора выбирают элемент по его уникальному идентификатору. Например, #welcome соответствует элементу с id="welcome":

<div>
  <p>Добро пожаловать!</p>
</div>

#welcome {
  background-color: blue;
}

Селекторы наличия и значения атрибута находят все элементы, которые имеют определённый атрибут или значение атрибута.

=»http://»]:not([href*=»[example.com](http://example.com/)»]) { color: #000; text-decoration: none; }

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

Селекторы-к

омбинаторы

Комбинаторы выбирают элементы, основываясь на их взаимосвязи в дереве DOM. Можно выбрать элементы, которые являются потомками, соседями или родителями других элементов.

Пример DOM-дерева. Здесь html — родитель для head и body. В свою очередь head — родитель для meta и title, а body — для header и main

Соседний родственный комбинатор

Записывается как селектор1 + селектор2. Выбирает элемент, подходящий под селектор2, перед которым расположен элемент, подходящий под селектор1.

<div>
  <p>Сегодня я стал великим фронтендером.</p>
  <p>Я написал стили для текста.</p> 
<div>

.first + .second {
  color: white;
}

Селектор .first + .second применит стили к абзацу с классом .second, потому что перед ним есть элемент с классом .first. Предложение «Я написал стили для текста.» станет белым.

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

Записывается как селектор1 > селектор2. Выбирает элементы, которые являются прямыми потомками элемента, подходящего под селектор1.

<div>
  <p>Я выучил CSS</p>
	<div>
    <p>Ну селекторы точно знаю.</p>
  </div>
</div>

.decoration > p {
  color: red;
}

Стили применятся только к «Я выучил CSS», этот текст станет красным.

Общий родственный комбинатор

Записывается как селектор1 ~ селектор2. Добавляет стили для элемента, который соответствует селектор2, если перед ним стоит элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

<div>
  <p>Это было прекрасное раннее утро. Идеальное время, чтобы приготовить чашку кофе или чая, открыть ноутбук и выучить CSS.</p>
  <p>Так Вовка и поступил. Погладил кота, набрался решимости и открыл для себя новый мир вёрстки.</p>
</div>

p ~ p {
  margin-top: 1em;
}

Стили применятся ко второму параграфу, появится внешний отступ сверху.

Этот селектор отличается от соседнего селектора тем, что между элементами селектор1 и селектор2 могут находиться другие элементы.

Комбинатор потомка

Записывается как селектор1 селектор2. Находит все потомки элемента, который подходит под селектор1, и применяет к ним стили.

<p>Оказалось, что селекторы — это
  <span>не так страшно,</span>
  как я думал. Нужно только немного попрактиковаться,
  <span>и всё сразу станет ясно.</span>
</p>

p span {
  color: blue;
}

Здесь в синий цвет окрасятся «не так страшно» и «всё сразу станет ясно. ».

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

Псевдоклассы — это простые селекторы, позволяющие выбирать элементы на основе информации, которая находится за пределами DOM-дерева или которую невозможно выразить с помощью простого селектора.

💡 Простой селектор — это селектор по одному условию, односоставной.

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

Чтобы использовать псевдокласс, нужно добавить его в селектор, например:

a:active {
  color: red;
}

В этом примере мы меняем цвет ссылки на красный, когда пользователь кликает по ней.

:hover

Псевдокласс :hover соответствует элементу, когда пользователь наводит на него курсор мыши. Например, здесь псевдокласс используется, чтобы убрать подчёркивание ссылки:

Как убрать подчёркивание ссылки

<a href="#">Нажми на меня</a>

a:hover {
  text-decoration: none;
}

:active

Псевдокласс :active соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

button:active {
  border-radius: 30px;
}

:visited

Псевдокласс :visited соответствует посещённой ссылке. Например, с его помощью мы можем поменять цвет ссылки, по которой перешёл пользователь:

a:visited {
  color: grey;
}

:focus

Псевдокласс :focus соответствует элементу, находящемуся в фокусе — то есть когда элемент выбран для ввода или навигации с помощью клавиатуры. Например, здесь :focus

используется для добавления зелёной рамки вокруг поля ввода:

<input type="text">

input:focus {
  border: 2px solid green;
}

:first-child, :last-child и :nth-child(n)

Эти псевдоклассы выбирают элемент по его порядковому номеру. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему. А псевдокласс :nth-child(n) указывает на n-й дочерний элемент. Например, с его помощью можно выбрать второй, пятый или предпоследний элемент. Вместо n в скобках указывается целое число или математическое выражение.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

/* выберет первый элемент — HTML*/
li:first-child {
  font-weight: 700;
}
/* выберет последний элемент — JavaScript*/
li:last-child {
  text-decoration: underline;
}
/* выберет второй элемент — CSS*/
li:nth-child(2) {
  font-weight: 700;
}

:first-of-type, :last-of-type и :nth-of-type(n)

Эти псевдоклассы похожи на предыдущие. Они тоже выбирают элемент по его порядковому номеру, но только с учётом типа — тега.

<div>
  <p>Первый параграф</p>
  <p>Второй параграф</p>
  <div>
    <span>Выделенный текст</span>
    <p>Третий параграф</p>
    <p>Четвёртый параграф</p>
  </div>
  <p>Пятый параграф</p>
  <span>Выделенный текст</span>
</div>

/*Текст в первом теге <p> будет жирным*/
p:first-of-type {
  font-weight: 700;
}
/*Текст во втором теге <p> будет подчёркнут*/
p:nth-of-type(2) {
  color: green;
}
/*Текст в последнем теге <p> будет подчёркнут*/
p:last-of-type {
  text-decoration: underline;
}

«Первый параграф» и «Третий параграф» станут жирными.

«Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь first-child, nth-child(2) и last-child, то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между <p> есть другие элементы — <span>.

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

:empty

Псевдокласс :empty — это селектор CSS, который соответствует элементам, не имеющим дочерних элементов, включая текстовые узлы и другие элементы. Его можно использовать для стилизации элементов, которые пусты или не имеют содержимого:

<input type="text">

input:empty {
  border: 1px solid red;
}}

В этом примере мы с помощью

:empty добавляем красную рамку пустому инпуту.

Заключение

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

Ещё статьи про CSS

Как посчитать специфичность селекторов
Как работает каскад в CSS
Флексы для начинающих
Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

CSS Selector

❮ Назад Дальше ❯

В CSS селекторы являются шаблонами, используемыми для выбора элементов, которые требуется присвоить стилю.

Используйте наш тестер селектора CSS для демонстрации различных селекторов.

Селектор	Пример	Пример описания
.class	.intro	Выбор всех элементов с
#id	#firstname	Выбор элемента с
*	*	Выбор всех элементов
element	p	Выбор всех элементов <p>
element,element	div, p	Выбор всех элементов <div> и всех элементов <p>
element element	div p	Выбор всех <p> элементов внутри элементов <div>
element>element	div > p	Выбор всех элементов <p>, в которых родительский элемент является элементом <div>
element+element	div + p	Выбор всех <p> элементов, помещенных сразу после <div> элементов
element1~element2	p ~ ul	Выбор каждого элемента <ul>, которому предшествует элемент <p>
[attribute]	[target]	Выбор всех элементов с целевым атрибутом
[attribute=value]	[target=_blank]	Выбор всех элементов с target=»_blank»
[attribute~=value]	[title~=flower]	Выделяет все элементы с атрибутом title, содержащим слово «flower»
[attribute\|=value]	[lang\|=en]	Выбор всех элементов со значением атрибута lang, начиная с «en»
[attribute^=value]	a[href^=»https»]	Выбирает каждый элемент <a>, значение атрибута href которого начинается с «https»
[attribute$=value]	a[href$=». pdf»]	Выбирает каждый элемент <a>, значение атрибута href которого заканчивается «.pdf»
[attribute=value*]	a[href*=»html5css.ru»]	Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку «html5css.ru»
:active	a:active	Выбор активной ссылки
::after	p::after	Вставка чего-либо после содержимого каждого элемента < p >
::before	p::before	Вставка чего-либо перед содержимым каждого элемента <p>
:checked	input:checked	Выбор каждого отмеченного <input> элемента
:disabled	input:disabled	Выбор всех отключенных элементов <input>
:empty	p:empty	Выбор каждого элемента <p>, не имеющего дочерних элементов (включая текстовые узлы)
:enabled	input:enabled	Выбор всех включенных элементов <input>
:first-child	p:first-child	Выбирает каждый элемент <p>, являющийся первым дочерним элементом родительского элемента
::first-letter	p::first-letter	Выбор первой буквы каждого элемента <p>
::first-line	p::first-line	Выбор первой строки каждого элемента <p>
:first-of-type	p:first-of-type	Выбор каждого элемента <p>, являющегося первым элементом <p> родительского элемента
:focus	input:focus	Выбор элемента ввода, имеющего фокус
:hover	a:hover	Выбор ссылок при наведении указателя мыши
:in-range	input:in-range	Выбор входных элементов со значением в указанном диапазоне
:invalid	input:invalid	Выбор всех входных элементов с недопустимым значением
:lang(language)	p:lang(it)	Выбирает каждый элемент <p> с атрибутом lang, равным «it» (Итальянский)
:last-child	p:last-child	Выбирает каждый элемент <p>, являющийся последним дочерним элементом родительского элемента
:last-of-type	p:last-of-type	Выбирает каждый элемент <p>, являющийся последним <p> элементом его родительского элемента
:link	a:link	Выбор всех непосещаемых ссылок
:not(selector)	:not(p)	Выбор каждого элемента, не являющегося элементом <p>
:nth-child(n)	p:nth-child(2)	Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского элемента
:nth-last-child(n)	p:nth-last-child(2)	Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского объекта, считая от последнего дочернего элемента
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбирает каждый элемент <p>, являющийся вторым элементом <p> родительского элемента, считая от последнего дочернего элемента
:nth-of-type(n)	p:nth-of-type(2)	Выбор каждого элемента <p>, являющегося вторым элементом <p> родительского элемента
:only-of-type	p:only-of-type	Выбор каждого элемента <p>, являющегося единственным элементом <p> родительского элемента
:only-child	p:only-child	Выбирает каждый элемент <p>, являющийся единственным дочерним элементом родительского элемента
:optional	input:optional	Выбор входных элементов без атрибута «обязательный»
:out-of-range	input:out-of-range	Выбор входных элементов со значением за пределами заданного диапазона
:read-only	input:read-only	Выбор входных элементов с указанным атрибутом «ReadOnly»
:read-write	input:read-write	Выбор входных элементов с атрибутом «ReadOnly» не указан
:required	input:required	Выбор входных элементов с указанным атрибутом «required»
:root	:root	Выбор корневого элемента документа
::selection	::selection	Выбор части элемента, выбранной пользователем
:target	#news:target	Выбор текущего активного элемента #news (щелчок по URL-адресу, содержащему это имя привязки)
:valid	input:valid	Выбор всех входных элементов с допустимым значением
:visited	a:visited	Выбор всех посещенных ссылок

❮ Назад Дальше ❯

Селекторы CSS

❮ Назад Далее ❯

Селектор CSS выбирает элементы HTML, которые вы хочу стиль.

Селекторы CSS

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

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

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

На этой странице объясняются самые основные селекторы CSS.

Селектор элементов CSS

Селектор элементов выбирает элементы HTML на основе имени элемента.

Пример

Здесь все элементы

на странице будут с выравниванием по центру, с красным цветом текста:

р {
текстовое выравнивание: по центру;
цвет: красный;
}

Попробуйте сами »

Селектор id CSS

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

Идентификатор элемента уникален на странице, поэтому селектор идентификатора привыкший выберите один уникальный элемент!

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

Пример

Приведенное ниже правило CSS будет применено к элементу HTML с помощью:

#para1 {
текстовое выравнивание: по центру;
цвет: красный;
}

Попробуйте сами »

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

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

Селектор класса выбирает элементы HTML с определенным атрибутом класса.

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

Пример

В этом примере все элементы HTML будут выделены красным цветом и выровнены по центру:

.center {
text-align: center;
цвет: красный;
}

Попробуйте сами »

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

Пример

В этом примере только элементы

с будут красный цвет и выравнивание по центру:

p.center {
text-align: center;
цвет: красный;
}

Попробуйте сами »

Элементы HTML также может относиться к более чем одному классу.

Пример

В этом примере элемент

будет оформлен в соответствии со стилем и to:

Этот абзац относится к двум классам.

Попробуйте сами »

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

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

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

Пример

Приведенное ниже правило CSS повлияет на каждый элемент HTML на странице:

* {
текстовое выравнивание: по центру;
цвет: синий;
}

Попробуйте сами »

Селектор группировки CSS

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

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

h2 {
текстовое выравнивание: по центру;
цвет: красный;
}

h3 {
выравнивание текста: по центру;
цвет: красный;
}

р {
текстовое выравнивание: по центру;
цвет: красный;
}

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

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

Пример

В этом примере мы сгруппировали селекторы из приведенного выше кода:

h2, h3, p {
выравнивание текста: по центру;
цвет: красный;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Установите красный цвет текста всех элементов

<стиль>
 {
   красный;
}

Начать упражнение

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

Селектор	Пример	Пример описания
# ID	#имя	Выбирает элемент с
. класс	.intro	Выбирает все элементы с
элемент.класс	стр. вступление	Выбирает только элементы с
*	*	Выбирает все элементы
элемент	р	Выбирает все элементы
элемент,элемент,..	дел, стр	Выбирает все элементы и все элементы

❮ Предыдущий Далее ❯

Селектор CSS — javatpoint

следующий → ← предыдущая

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

В CSS существует несколько различных типов селекторов.

Селектор элементов CSS
Селектор идентификаторов CSS
Селектор класса CSS
Универсальный селектор CSS
Селектор группы CSS

1) Селектор элементов CSS

Селектор элементов выбирает элемент HTML по имени.

<голова> <стиль> п{ выравнивание текста: по центру; цвет синий; } <тело>

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Протестируйте сейчас

Выход:

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

2) Селектор идентификаторов CSS

Селектор id выбирает атрибут id элемента HTML, чтобы выбрать конкретный элемент. Идентификатор всегда уникален на странице, поэтому он выбирается для выбора одного уникального элемента.

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

Возьмем пример с идентификатором «para1».

<голова> <стиль> #пара1 { выравнивание текста: по центру; цвет синий; } <тело>

Здравствуйте, Javatpoint.com

Этот абзац не изменится.

Протестируйте сейчас

Выход:

Здравствуйте, Javatpoint.com

Этот абзац не будет затронут.

3) Селектор класса CSS

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

Примечание. Имя класса не должно начинаться с цифры.

Возьмем пример с классом «центр».

<голова> <стиль> .центр { выравнивание текста: по центру; цвет синий; } <тело>

Этот заголовок синего цвета и выровнен по центру.

Этот абзац выделен синим цветом и выровнен по центру.

Протестируйте сейчас

Выход:

Этот заголовок выделен синим цветом и выровнен по центру.

Этот абзац выделен синим цветом и выровнен по центру.

Селектор класса CSS для определенного элемента

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

Давайте посмотрим на пример.

<голова> <стиль> п.центр { выравнивание текста: по центру; цвет синий; } <тело>

Этот заголовок не затрагивается

Этот абзац выделен синим цветом и выровнен по центру.

Протестируйте сейчас

Выход:

Этот заголовок не затрагивается

Этот абзац выделен синим цветом и выровнен по центру.

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

Универсальный селектор используется как подстановочный знак. Он выбирает все элементы на страницах.

<голова> <стиль> * { цвет: зеленый; размер шрифта: 20px; } <тело>

Это заголовок

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Протестируйте сейчас

Выход:

Это заголовок

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

5) Селектор группы CSS

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

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

Давайте посмотрим код CSS без группового селектора.

ч2 { выравнивание текста: по центру; цвет синий; } h3 { выравнивание текста: по центру; цвет синий; } п { выравнивание текста: по центру; цвет синий; }

Как видите, вам нужно определить свойства CSS для всех элементов. Его можно сгруппировать следующим образом:

h2,h3,р { выравнивание текста: по центру; цвет синий; }

Давайте посмотрим на полный пример селектора группы CSS.

<голова> <стиль> h2, h3, п { выравнивание текста: по центру; цвет синий; } <тело>

Здравствуйте, Javatpoint.

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

In css: Универсальные селекторы — CSS | MDN

CSS-селекторы. Шпаргалка для новичков — журнал «Доктайп»

Основные селекторы

Селекторы-к

Соседний родственный комбинатор

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

Общий родственный комбинатор

Комбинатор потомка

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

Заключение

Ещё статьи про CSS

CSS Selector

Селекторы CSS

Селекторы CSS

Селектор элементов CSS

Пример

Селектор id CSS

Пример

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

Пример

Пример

Пример

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

Пример

Селектор группировки CSS

Пример

Проверьте себя с помощью упражнений

Упражнение:

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

Селектор CSS — javatpoint

1) Селектор элементов CSS

2) Селектор идентификаторов CSS

3) Селектор класса CSS

Примечание. Имя класса не должно начинаться с цифры.

Этот заголовок синего цвета и выровнен по центру.

Этот заголовок выделен синим цветом и выровнен по центру.

Селектор класса CSS для определенного элемента

Этот заголовок не затрагивается

Этот заголовок не затрагивается

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

Это заголовок

Это заголовок

5) Селектор группы CSS

Здравствуйте, Javatpoint.

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