Селектор что это такое

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

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

Для обозначения универсального селектора применяется символ звёздочки ( * ) и в общем случае синтаксис будет следующий.

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

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

Пример 14.1. Использование универсального селектора

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Универсальный селектор   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

2. Что означает следующая запись в стилях?

Установить фоновый цвет для всех элементов веб-страницы.
Задать цвет для всех текстовых элементов документа.
Установить фоновый цвет для всех элементов внутри контейнера .
Установить фоновый цвет только для тегов , вложенных в другие контейнеры.
Зеленый цвет фона для всех тегов в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

Ut wisis enim ad
Quis nostrud exerci
Tution ullamcorper suscipit

Lorem
consectetuer
Ut
nostrud
Nisl

Ответы

2. Установить фоновый цвет для всех элементов внутри контейнера .

Селекторы CSS

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

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

Что такое селекторы?

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

Some code with the h1 highlighted.

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

h1  color: blue; > .special  color: blue; >

А могу написать короче — просто отделив селекторы запятыми:

h1, .special  color: blue; >

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

h1, .special  color: blue; >

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

h1  color: blue; > ..special  color: blue; >

Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

h1, ..special  color: blue; >

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

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как .

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

#unique  >

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

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

a[title]  >

или основываясь на значении атрибута:

a[href="https://example.com"]  >

Псевдоклассы, псевдоэлементы

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

a:hover  >

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца

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

p::first-line  >

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):

article > p  >

Продолжение

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

Справка о селекторах

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

Селектор	Пример	Руководство
Селектор по типу	h1	Селектор по типу
Универсальный селектор	*	Универсальный селектор
Селектор класса	.box	Селекторы классов
Селектор ID	#unique	Селекторы по ID
Селектор атрибутов	a[title]	Селекторы атрибутов
Селектор псевдоклассов	p:first-child	Псевдоклассы
Селектор псевдоэлементов	p::first-line	Псевдоэлементы
Селектор потомков	article p	Селектор потомков
Селектор дочерних элементов	article > p	Селектор дочерних элементов
Смежные селекторы	h1 + p	Смежные селекторы
Селектор братских элементов	h1 ~ p	Селектор братских элементов

Found a content problem with this page?

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

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Значение слова «селектор»

Источник (печатная версия): Словарь русского языка: В 4-х т. / РАН, Ин-т лингвистич. исследований; Под ред. А. П. Евгеньевой. — 4-е изд., стер. — М.: Рус. яз.; Полиграфресурсы, 1999; (электронная версия): Фундаментальная электронная библиотека

Селектор (англ. selector) — число, хранящееся в сегментном регистре; это 16-битная структура данных, которая является идентификатором сегмента. Селектор указывает не на сам сегмент в памяти, а на его дескриптор, в таблице дескрипторов… Селектор «живёт» в сегментном регистре (CS, DS, ES, FS, GS, SS).

В реальном режиме содержимое каждого сегментного регистра представляет собой номер параграфа — 16-байтового участка памяти, выровненного на границу 16 байт.

В защищённом режиме каждый сегментный регистр делится на три части, как показано ниже:

Бит TI в этом случае указывает, какая таблица дескрипторов должна использоваться (нуль соответствует глобальной таблице дескрипторов, единица — локальной таблице дескрипторов).

селе́ктор

Делаем Карту слов лучше вместе

Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!

Спасибо! Я стал чуточку лучше понимать мир эмоций.

Вопрос: лафитник — это что-то нейтральное, положительное или отрицательное?

Нейтральное
Положительное
Отрицательное

Синонимы к слову «селектор&raquo

Предложения со словом «селектор&raquo

Для этого необходимо вручную перевести селектор рычага в соответствующее положение.

Сочетаемость слова «селектор&raquo

внутренний селектор
селектор связи
по селектору секретаря
кнопка селектора
клавишу селектора
сигнал селектора
нажать кнопку на селекторе
вызвать по селектору
подойти к селектору
(полная таблица сочетаемости)

Каким бывает «селектор»

Понятия, связанные со словом «селектор»

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

Номеронабира́тель, дисковый номеронабиратель — составная часть телефонного аппарата. Изобретён Алмоном Строуджером, «отцом всех АТС». Служит при импульсном наборе для формирования импульсов импеданса (размыканию шлейфа или телефонной проводной линии) соответственно набранной цифре: «1» — 1 импульс; «2» — 2 импульса; … ; «9» — 9 импульсов; «0» — 10 импульсов.

Кно́пка — механическое устройство для передачи сигнала/ввода информации, элемент интерфейса человек-машина: элементарный физический механизм передачи электрического сигнала различным устройствам путём замыкания или размыкания двух или более контактов. По сути своей является датчиком внешнего физического воздействия (усилия нажатия), передающим далее факт такового соединённым с ним устройствам. Для пользователя термин «кнопка» ограничен крышкой, частью конструктива механизма «кнопка», на которую он.

Электрóнный индикáтор (лат. indicator — указатель) — это электронное показывающее устройство, предназначенное для визуального контроля за событиями, процессами и сигналами.

Накопитель на гибких магнитных дисках (англ. floppy disk drive) — дисковод, предназначенный для считывания и записи информации с дискеты.

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

Дополнительно

Как правильно пишется слово «селектор»
Разбор по составу слова «селектор» (морфемный разбор)
Цитаты со словом «селектор» (подборка цитат)
Перевод слова «селектор» и примеры предложений (английский язык)
Definition of «selector&raquo at WordTools.ai (английский язык)