Rivalry2

Селекторы: кратко о главном OTUS

2026-03-10 01:37 Diff

https://otus.ru/journal/selektory-kratko-o-glavnom/oj-1080x720-2024-07-14t173338-932/

Что это такое
Значимость в верстке
Виды селекторов
Продвинутые селекторы
- Псевдоклассы
- Псевдоэлементы
Селекторы потомков и соседей
Использование в разном контексте
- Селекторы и медиа-запросы
- Препроцессоры

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

У CSS очень много полезных элементов и функций. Сегодня предстоит познакомиться с так называемыми селекторами. Эти элементы широко используются в верстке и значительно упрощают ее. Представленная ниже информация рассчитана на широкий круг лиц. Она подойдет как начинающим верстальщикам, так и обычным пользователям для общего ознакомления с основами веб-разработки.

Что это такое

Селектор в CSS – это инструмент выбора элементов в HTML-документе. С его помощью удастся задавать стили для определенных компонентов и их групп. Данный прием позволяет определить внешний вид веб-сайта.

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

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

Значимость в верстке

Рассматриваемый элемент верстки является значимым для каждого веб-дизайнера. На то есть несколько причин:

Пользуясь селекторами в CSS, дизайнеры смогут задавать стили для всех элементов на странице. К ним можно отнести формы, текст, изображения, таблицы, ссылки, кнопки и так далее. Без изучаемого инструмента веб-страницы были бы некрасивыми и очень простыми.
Селектор – инструмент, позволяющий задавать стили для разных состояний элементов. Примерами могут быть «активное», «наведение», «выделение», «фокус» и так далее. За счет соответствующего приема удается добиться от веб-проекта максимальной привлекательности для пользователя и интерактивности. А еще – создавать интуитивно понятные интерфейсы, с которыми будет приятно работать.
За счет изучаемого инструмента удается создавать каскадные стили, а также наследовать свойства от родительских элементов и применять их к потомкам. Подобный прием положительно сказывается на объеме исходного кода – его становится на порядок меньше. Он также упрощает процесс стилизации.

Основным назначением селекторов является идентификация компонентов для выбора определенного элемента и дальнейшей работы с ним. Свойства CSS включают в себя описание форматирования: цветов, шрифтов, размеров. Скрипты JavaScript включают в себя коды выполняемых действий на странице. Примером может послужить изменение вида элемента сайта. Селекторы применяются для определения того, к каким элементам будут применяться стили, а также какие именно элементы необходимо использовать в скриптах.

Виды селекторов

Селекторы в CSS могут быть разными. Вот основные их виды:

элементные;
классовые;
идентификаторы;
сложные.

Элементные селекторы – это инструмент, который применяет стили или скрипты ко всем элементам выбранного типа на заданной странице. Пример – div. Он применит заданные стили ко всем компонентам <div> в исходном документе. Это простейший тип селектора. Он является основным.

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

Селекторы идентификаторов в CSS будут начинаться с символа решетки («#»). Они предназначаются для стилизации определенного компонента, уникального на имеющейся странице. В качестве примера можно рассматривать #header. Он будет применять стили только к компоненту с идентификатором header. Идентификаторы рекомендуется задействовать для уникальных составляющих веб-сайта: шапки или подвала.

Сложные селекторы CSS включают в себя комбинаторы:

потомок;
непосредственный потомок;
соседние элементы;
общие следующие соседи.

С помощью соответствующих инструментов можно более точно выбирать элементы относительно других компонентов в HTML-файле. В качестве примера можно привести оформление маркированных списков ul > li. Стилизация будет осуществляться только относительно тех <li>, которые выступают потомками <ul>. Элементы уровнем выше или с разницей более одного уровня стилизованы не будут.

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

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

Универсальный селектор – инструмент, применяющий стили ко всем составляющим на странице. Он обозначается символом «звездочка» (*). С его помощью удобно сбрасывать отступы, а также задавать значение box-sizing для всех блочных элементов.

Выше – наглядный пример работы с рассматриваемым типом инструмента CSS-верстки.

По тегу

Селекторы по тегу в CSS называются элементными. Такое название они получили из-за того, что применяются ко всем компонентам с одинаковыми тегами.

Примером может быть стилизация только для компонентов с тегами:

<p>;
<div>;
<h2>.

Вот – наглядный пример реализации рассматриваемого типа инструментов. Здесь у ссылок убирается подчеркивание.

По идентификатору

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

Здесь текст в блоке p с идентификатором intro будет окрашен в красный цвет, а текст с идентификатором article_content – выделен жирным. Он также получит шрифт без засечек.

По классу

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

Абзац включен в классы article и plain_text. К нему будут применяться стили обоих классов:

Выше – наглядный пример того, как будет выглядеть код с селектором класса.

Группировка

Рассматриваемый инструмент допускает группировку. Это необходимо для применения стилей к нескольким группам и/или классам элементов.

Вот – пример кода, в котором имеется группировка селекторов. Они просто перечисляются через запятую.

Продвинутые селекторы

Продвинутые селекторы CSS – это способ выбора элементов на странице с использованием сложных правил. Прием, дающий возможность определения компонентов на основе их отношения к другим составляющим, состояниям, атрибутам и так далее.

Ниже будут представлены примеры наиболее распространенных продвинутых рассматриваемых инструментов. Эта информация пригодится более опытным веб-программистам и верстальщикам.

Псевдоклассы

Псевдокласс – ключевое слово CSS, позволяющее применять стили к элементам в зависимости от их состояния или положения на веб-сервисе. Такие компоненты указываются после селектора и отделяются от него двоеточием.

Существуют разнообразные псевдоклассы в CSS. Далее будут приведены наиболее распространенные из них.

Первый – это :hover. Он дает возможность применять стили при наведении курсора на тот или иной элемент.

Вторым активно используемым на практике псевдоклассом является :active. Он дает возможность применять стили тогда, когда элемент находится в активном состоянии.

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

Еще один распространенный псевдокласс – :focus. Он позволяет применять стили тогда, когда элемент находится в фокусе.

Примером может служить нажатие на input. Выше можно увидеть фрагмент кода, наглядно демонстрирующий упомянутый псевдокласс.

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

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

Псевдоэлементы можно отличить по характерной записи – двух двоеточий после селектора элемента (::). Как и в случае с псевдоклассами, псевдоэлементов много. Ниже – несколько самых распространенных примеров.

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

Следующий псевдоэлемент – ::after. Применяется для добавления контента после содержимого того или иного компонента.

Последним распространенным псевдоэлементом является ::first-line. Он дает возможность стилизировать первую строку текста, расположенную внутри того или иного компонента.

Селекторы потомков и соседей

Еще одна категория селекторов – это селекторы потомков. Они направлены на выбор элементов, выступающих потомками других составляющих на страницах.

Выше – наглядный пример реализации соответствующего инструмента верстки.

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

Выше – фрагмент кода, использующий упомянутый инструмент на практике.

Использование в разном контексте

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

медиа-запросы;
CSS-анимация;
препроцессоры.

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

Селекторы и медиа-запросы

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

Чтобы воспользоваться селекторами внутри медиа-запросов, необходимо определить этот самый запрос при помощи ключевого слова @media. Далее – задать условия, при которых он будет применяться. Теперь останется внутри блока медиа-запроса использовать селекторы и задавать те или иные стили компонентов веб-страницы.

В примере, написанном выше, была определена анимация rotate. Она использует селекторы 0 % и 100 % для определения начального и конечного состояний компонента в процессе реализации анимации. После этого анимация применяется к div. Для этого задействованы свойства:

animation-name;
animation-duration;
animation-iteration-count;
animation-timing-function.

Использование @keyframes дает возможность создания динамичной и красивой анимации в пределах имеющегося веб-сайта.

Препроцессоры

Syntactically Awesome Sheets или Sass – язык препроцессора CSS. Он предлагает разработчикам мощные инструменты для создания более гибких и удобных стилей. Одним из наиболее эффективных средств верстки является использование селекторов в Sass.

В этом случае получится обращаться к элементам и их группам, а также изменять стили соответствующих составляющих. Вот наглядный пример шаблонного селектора %flex-element-center для центрирования компонентов по вертикали и горизонтали при помощи flexbox:

Saas допускает использование разнообразных типов селекторов: классы, псевдоклассы, псевдоэлементы, идентификаторы и другие. Операторы комбинирования рассматриваемого инструмента, таки как «родитель», «потомок», «брат» и им подобные тоже допустимы.

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

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

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!


<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">

<head>

	<meta charset="UTF-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	
	<title>Селекторы: кратко о главном OTUS</title>

		<!-- All in One SEO 4.5.2.1 - aioseo.com -->
		<meta name="description" content="Для создания веб-страниц часто используется HTML в сочетании с CSS. Первый язык программирования отвечает за функциональные возможности того или иного портала, второй – за визуальное оформление. У CSS очень много полезных элементов и функций. Сегодня предстоит познакомиться с так называемыми селекторами. Эти элементы широко используются в верстке и значительно упрощают ее. Представленная ниже информация рассчитана" />
		<meta name="robots" content="max-image-preview:large" />
		<link rel="canonical" href="https://otus.ru/journal/selektory-kratko-o-glavnom/" />
		<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
		<script type="application/ld+json" class="aioseo-schema">
			{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#article","name":"\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b: \u043a\u0440\u0430\u0442\u043a\u043e \u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c OTUS","headline":"\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b: \u043a\u0440\u0430\u0442\u043a\u043e \u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/07\/oj-1080x720-2024-07-14T173338.932.jpg","width":2245,"height":1587},"datePublished":"2024-07-14T14:33:53+00:00","dateModified":"2024-07-14T14:33:56+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, CSS, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#listItem","position":2,"name":"\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b: \u043a\u0440\u0430\u0442\u043a\u043e \u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#webpage","url":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/","name":"\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b: \u043a\u0440\u0430\u0442\u043a\u043e \u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c OTUS","description":"\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTML \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 CSS. \u041f\u0435\u0440\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0442\u0430\u043b\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 \u2013 \u0437\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435. \u0423 CSS \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438. \u042d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0435\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043d\u0438\u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/07\/oj-1080x720-2024-07-14T173338.932.jpg","@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#mainImage","width":2245,"height":1587},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/selektory-kratko-o-glavnom\/#mainImage"},"datePublished":"2024-07-14T14:33:53+00:00","dateModified":"2024-07-14T14:33:56+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
		</script>
		<!-- All in One SEO -->

<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/10306" /><link rel='shortlink' href='https://otus.ru/journal/?p=10306' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F&#038;format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
		<style type="text/css" id="wp-custom-css">
			#menu-item-10406 .wpel-icon {
    display: none;	
}

#menu-item-10407 .wpel-icon {
    display: none;	
}


.otus-login-site a  .wpel-icon {
	    display: none;	
}

.menu-menju-navykov-container a  .wpel-icon {
	    display: none;	
}

.otus-login-site a 
{
    background: #ffd709;
    border-radius: 12px;
    color: #0f0f10;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    display: block;
    text-align: center;
    padding: 8px 25px;
}

.main-footer.dark {  
    background: linear-gradient(90deg, #a64fc5, #4f54e6);
    border-color: transparent;
}


.main-footer.bold .copyright {
	    color: #fff;
}

.main-footer.bold .to-top i {
    color: #fff;
}

.main-footer.bold .back-to-top {
	    color: #fff;
}

.nav__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;	
}


.scrollable-menu .menu {
    display: flex;


}


.nav__scroll 
{
	    background: linear-gradient(90deg, #a64fc5, #4f54e6);
}


.scrollable-menu .menu .menu-item {
    flex: 0 0 auto;
    padding: 15px 15px;
}

.scrollable-menu .menu .menu-item  a {
    color: #fff;
}

.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}

.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}

.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/

body {
    min-width: 320px;	
}

.banner-click img {
	    margin: 0 auto;
    display: block;
}

.banner-click {
	    cursor: pointer;
}

.banner-footer-area {
	    margin-bottom: 20px;
}

.banner-left-area {
	margin-top: 40px;
}		</style>
		
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
					  //event.detail.contactFormId;
					  if(ym){
				          //console.log(event.detail);
						  ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
						  ym(34531570, 'params', {
						      page_url: window.location.href, 
						      status: event.detail.status, 
						      locale: event.detail.contactFormLocale, 
						      form_id: event.detail.contactFormId, 
						  });
					  }
					}, false );
				</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->

</head>

<body class="post-template-default single single-post postid-10306 single-format-standard right-sidebar  lazy-normal has-lb">


<div class="main-wrap">

	
		
		
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">

	<div class="inner inner-head" data-sticky-bar="0">

		<div class="wrap cf wrap-head">

			<div class="left-contain">
				<span class="mobile-nav"><i class="fa fa-bars"></i></span>

					<div class="title">
		
		<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
		
					
						<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
			
				
		</a>
	
	</div>
			</div>


			<div class="navigation-wrap inline">
				
					<nav class="navigation inline simple light" data-sticky-bar="0">
						<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</nav>

							</div>

			<div class="actions">
				<div class="otus-login-site">
					<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
				</div>

				
				
				
					<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>

				
				
			</div>

		</div>
	</div>

</header> <!-- .main-head -->

<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
	<div class="container wrap">
		
			<div class="links inline simple light scrollable-menu">
				<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>			</div>

			</div>
</div>

	
		
	
<div class="main wrap">

	<div class="ts-row cf">
		<div class="col-8 main-content cf">
		
			
				
<article id="post-10306" class="the-post post-10306 post type-post status-publish format-standard has-post-thumbnail category-polza tag-css tag-programmirovanie">
	
	<header class="post-header the-post-header cf">
			
			<div class="post-meta the-post-meta">
		
				
			<span class="post-cat">	
									
		<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>

					</span>
			
				
		
		<h1 class="post-title">
			Селекторы: кратко о главном			
		</h1>
		
			
					<a href="https://otus.ru/journal/selektory-kratko-o-glavnom/" class="date-link" data-wpel-link="internal"><time class="post-date">14 июля, 2024</time></a>
				
	</div>

			
	<div class="featured">
	
				
					
			<a href="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T173338.932.jpg" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Селекторы: кратко о главном" title="Селекторы: кратко о главном" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T173338.932-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T173338.932-270x180.jpg 270w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T173338.932-770x515.jpg" data-sizes="(max-width: 770px) 100vw, 770px" />			</a>
			
				
	</div>
		
	</header><!-- .post-header -->

				
		
		<div class="post-content description cf entry-content content-normal">


			<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%A7%D1%82%D0%BE_%D1%8D%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5" title="Что это такое">Что это такое</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%97%D0%BD%D0%B0%D1%87%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%B2_%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B5" title="Значимость в верстке">Значимость в верстке</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%92%D0%B8%D0%B4%D1%8B_%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2" title="Виды селекторов">Виды селекторов</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9" title="Универсальный">Универсальный</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%9F%D0%BE_%D1%82%D0%B5%D0%B3%D1%83" title="По тегу">По тегу</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%9F%D0%BE_%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%83" title="По идентификатору">По идентификатору</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%9F%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%83" title="По классу">По классу</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B0" title="Группировка">Группировка</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%9F%D1%80%D0%BE%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%D1%8B%D0%B5_%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B" title="Продвинутые селекторы">Продвинутые селекторы</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="#%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B" title="Псевдоклассы">Псевдоклассы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-11" href="#%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B" title="Псевдоэлементы">Псевдоэлементы</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-12" href="#%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%BF%D0%BE%D1%82%D0%BE%D0%BC%D0%BA%D0%BE%D0%B2_%D0%B8_%D1%81%D0%BE%D1%81%D0%B5%D0%B4%D0%B5%D0%B9" title="Селекторы потомков и соседей">Селекторы потомков и соседей</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-13" href="#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2_%D1%80%D0%B0%D0%B7%D0%BD%D0%BE%D0%BC_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B5" title="Использование в разном контексте">Использование в разном контексте</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-14" href="#%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%B8_%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D1%8B" title="Селекторы и медиа-запросы">Селекторы и медиа-запросы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-15" href="#%D0%9F%D1%80%D0%B5%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81%D0%BE%D1%80%D1%8B" title="Препроцессоры">Препроцессоры</a></li></ul></li></ul></nav></div>

<p>Для создания веб-страниц часто используется HTML в сочетании с CSS. Первый язык программирования отвечает за функциональные возможности того или иного портала, второй – за визуальное оформление.</p>



<p>У CSS очень много полезных элементов и функций. Сегодня предстоит познакомиться с так называемыми селекторами. Эти элементы широко используются в верстке и значительно упрощают ее. Представленная ниже информация рассчитана на широкий круг лиц. Она подойдет как начинающим верстальщикам, так и обычным пользователям для общего ознакомления с основами веб-разработки.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D1%8D%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5"></span>Что это такое<span class="ez-toc-section-end"></span></h2>



<p>Селектор в CSS – это инструмент выбора элементов в HTML-документе. С его помощью удастся задавать стили для определенных компонентов и их групп. Данный прием позволяет определить внешний вид веб-сайта.</p>



<p>Селектор в CSS – шаблон, соответствующий тем или иным элементам HTML-разметки. С их помощью браузеры смогут определить, какой стиль оформления должен применяться к составляющим сайта.</p>



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



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%97%D0%BD%D0%B0%D1%87%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%B2_%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B5"></span>Значимость в верстке<span class="ez-toc-section-end"></span></h2>



<p>Рассматриваемый элемент верстки является значимым для каждого веб-дизайнера. На то есть несколько причин:</p>



<ol>
<li>Пользуясь селекторами в CSS, дизайнеры смогут задавать стили для всех элементов на странице. К ним можно отнести формы, текст, изображения, таблицы, ссылки, кнопки и так далее. Без изучаемого инструмента веб-страницы были бы некрасивыми и очень простыми.</li>



<li>Селектор – инструмент, позволяющий задавать стили для разных состояний элементов. Примерами могут быть «активное», «наведение», «выделение», «фокус» и так далее. За счет соответствующего приема удается добиться от веб-проекта максимальной привлекательности для пользователя и интерактивности. А еще – создавать интуитивно понятные интерфейсы, с которыми будет приятно работать.</li>



<li>За счет изучаемого инструмента удается создавать каскадные стили, а также наследовать свойства от родительских элементов и применять их к потомкам. Подобный прием положительно сказывается на объеме исходного кода – его становится на порядок меньше. Он также упрощает процесс стилизации.</li>
</ol>



<p>Основным назначением селекторов является идентификация компонентов для выбора определенного элемента и дальнейшей работы с ним. Свойства CSS включают в себя описание форматирования: цветов, шрифтов, размеров. Скрипты JavaScript включают в себя коды выполняемых действий на странице. Примером может послужить изменение вида элемента сайта. Селекторы применяются для определения того, к каким элементам будут применяться стили, а также какие именно элементы необходимо использовать в скриптах.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D0%B8%D0%B4%D1%8B_%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2"></span>Виды селекторов<span class="ez-toc-section-end"></span></h2>



<p>Селекторы в CSS могут быть разными. Вот основные их виды:</p>



<ul>
<li>элементные;</li>



<li>классовые;</li>



<li>идентификаторы;</li>



<li>сложные.</li>
</ul>



<p>Элементные селекторы – это инструмент, который применяет стили или скрипты ко всем элементам выбранного типа на заданной странице. Пример – div. Он применит заданные стили ко всем компонентам &lt;div&gt; в исходном документе. Это простейший тип селектора. Он является основным.</p>



<p>Классовые селекторы будут использовать точку перед именем класса. Они дают возможность выбора группы компонентов, которым назначается тот или иной класс. Примером служит .menu. Он дает возможность выбрать каждый компонент, содержащий класс menu. Классовые селекторы являются более гибкими по сравнению с элементными. Это связано с тем, что один и тот же класс может быть использован для элементов разных типов.</p>



<p>Селекторы идентификаторов в CSS будут начинаться с символа решетки («#»). Они предназначаются для стилизации определенного компонента, уникального на имеющейся странице. В качестве примера можно рассматривать #header. Он будет применять стили только к компоненту с идентификатором header. Идентификаторы рекомендуется задействовать для уникальных составляющих веб-сайта: шапки или подвала.</p>



<p>Сложные селекторы CSS включают в себя комбинаторы:</p>



<ul>
<li>потомок;</li>



<li>непосредственный потомок;</li>



<li>соседние элементы;</li>



<li>общие следующие соседи.</li>
</ul>



<p>С помощью соответствующих инструментов можно более точно выбирать элементы относительно других компонентов в HTML-файле. В качестве примера можно привести оформление маркированных списков ul &gt; li. Стилизация будет осуществляться только относительно тех &lt;li&gt;, которые выступают потомками &lt;ul&gt;. Элементы уровнем выше или с разницей более одного уровня стилизованы не будут.</p>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A3%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9"></span>Универсальный<span class="ez-toc-section-end"></span></h3>



<p>Универсальный селектор – инструмент, применяющий стили ко всем составляющим на странице. Он обозначается символом «звездочка» (*). С его помощью удобно сбрасывать отступы, а также задавать значение box-sizing для всех блочных элементов.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXc6LTzcuRdHDLFwHy-0WUyS-iCNvkZ3urfzVTI7k8H5KX8RpdbHWUKy8ksQvYn6iSsXtmQLWIyDrKDFZKVkeXt7YXbIKRnQ83ADJxzo4VmB4e7mamizR17VhPRaky6a2QAIKoPLCUg6J0XfXeRrUzqT38SNVV6dUT9HhZm_Z3iEz9_EXmKs3Q?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Выше – наглядный пример работы с рассматриваемым типом инструмента CSS-верстки.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BE_%D1%82%D0%B5%D0%B3%D1%83"></span>По тегу<span class="ez-toc-section-end"></span></h3>



<p>Селекторы по тегу в CSS называются элементными. Такое название они получили из-за того, что применяются ко всем компонентам с одинаковыми тегами.</p>



<p>Примером может быть стилизация только для компонентов с тегами:</p>



<ul>
<li>&lt;p&gt;;</li>



<li>&lt;div&gt;;</li>



<li>&lt;h2&gt;.</li>
</ul>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcPO5opHAsyojIQGLVwwGUfBkenehkYC5Z9IYebw3GoLGlzBEQ3LJBVU8qhpeHVIcOsjGbkP94I--mC8VhItgdKsyI5kCzxMTSlUmmNiOCEVyuuXYcGjmRH8BNgcWdXAnNz_BNa_3ZLO-cTgxW3pq0hKAaCE8jrbCHbh6qAewxA2iQrv2GALLg?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Вот – наглядный пример реализации рассматриваемого типа инструментов. Здесь у ссылок убирается подчеркивание.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BE_%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%83"></span>По идентификатору<span class="ez-toc-section-end"></span></h3>



<p>Данный инструмент обозначается символом решетки. Он применяет стили к элементу, для которого задан атрибут id с тем или иным значением. У соответствующего компонента может быть только один уникальный идентификатор в пределах имеющейся веб-страницы.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXecB6xucs3ivD2fHMWQg-QHexmub23UH-NgydtN_DVZMhmSxv1UJtR0Y1F-Q3aA6aB3-RBChb6JR8QK6NuyCbi7ZfItnUlnf8rPgcPfki_KzWor1FleHPFQvylDmSV2aTvls7JeofBAdHmkZdkn5ebgprX_fy8r2MBp4qGYMUv6kgaUd5F8HgQ?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXetM7K1fT5olSp-jsPnKPyUITPOANowp8o0Fzl7KiwXbR-mIIP_nLRsGkDUNh8eO-enmKbbUXF0JGO_EZasCNDCTnkDbZ0jhjnBPwJGcs1yOrCZ0VUx548kHKGJSNXQPI_jQauCZWC7Nx-icxKq2WNKltyCFhAWWmT1iQ_8RLVOFzTsHT_ZAQ?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Здесь текст в блоке p с идентификатором intro будет окрашен в красный цвет, а текст с идентификатором article_content – выделен жирным. Он также получит шрифт без засечек.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%83"></span>По классу<span class="ez-toc-section-end"></span></h3>



<p>Селектор CSS по классу выбирает компоненты, для которых назначается атрибут class с соответствующим параметром. Один элемент может принадлежать к нескольким классам. В этом случае они перечисляются, отделяясь друг от друга пробелом:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeZE_b36w5eb-mZv_KYD9umumPxaAaZ2KV5iJeK4wi1BpElNV-rfQyNq-j2tXbIAfn9oITbv8JDth-Vn2fLq5uoqBUPViJ67qfQmc1hUdva9pxHBZktBo4NnkWJEzc4OUuqB-lyS1UpmnKbMynlVUKdYlsC5K2Hm62WtH3c77SNjgDptr_Qo1o?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Абзац включен в классы article и plain_text. К нему будут применяться стили обоих классов:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdtmL2_bt30q6Fb9tORRR9lBaXpHRdGLa1TzSmitXASQhGkewzyG0d1UWpfLLERngP8CsfQ-FAthitNiUPlmEZGfidyBX-_qnb6T8vw_HxAuKaIkWwyFb-CO76wpl-569-g9lrqDhkGYLBT_L5bLLJcs8RKLQxjvUNAs03eQsw9fZo3EPGjSrU?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Выше – наглядный пример того, как будет выглядеть код с селектором класса.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B0"></span>Группировка<span class="ez-toc-section-end"></span></h3>



<p>Рассматриваемый инструмент допускает группировку. Это необходимо для применения стилей к нескольким группам и/или классам элементов.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfc0Milvd_qGdNsArOHvWK_4BxNyGE6Fvqtc8mo_5pgIIl0AJJEPcHvXUMKgu_aLQL8PKNnMvieIPxpwIt6EQonm1cV85yHU-7IVdMfn9KO3YfBQj9PfxAQpghPvsCc9VrqAqOTYfxkp_8vsCqJBOP8qLJz_Jk2bjNwZZ2vWS6oop1kt5kR6A?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Вот – пример кода, в котором имеется группировка селекторов. Они просто перечисляются через запятую.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%D1%8B%D0%B5_%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B"></span>Продвинутые селекторы<span class="ez-toc-section-end"></span></h2>



<p>Продвинутые селекторы CSS – это способ выбора элементов на странице с использованием сложных правил. Прием, дающий возможность определения компонентов на основе их отношения к другим составляющим, состояниям, атрибутам и так далее.</p>



<p>Ниже будут представлены примеры наиболее распространенных продвинутых рассматриваемых инструментов. Эта информация пригодится более опытным веб-программистам и верстальщикам.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B"></span>Псевдоклассы<span class="ez-toc-section-end"></span></h3>



<p>Псевдокласс – ключевое слово CSS, позволяющее применять стили к элементам в зависимости от их состояния или положения на веб-сервисе. Такие компоненты указываются после селектора и отделяются от него двоеточием.</p>



<p>Существуют разнообразные псевдоклассы в CSS. Далее будут приведены наиболее распространенные из них.</p>



<p>Первый – это :hover. Он дает возможность применять стили при наведении курсора на тот или иной элемент.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXel8zzDPTeCti-C3F6X1HBU3inhgmn03BspUmZF_29zRbjMjYOUFWmqcbKGM1R5fgcnEjRGD_RJJEpySmzfRBU8Azyg51V1nopjHXsyZTcW8sHeJUPkByIZIUdrcPT0vWiBCGp9wrAlQWnfNL6XUxlhh7fCWmAQiO2_uKHqTwN7lSnxG_mjpQ?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Вторым активно используемым на практике псевдоклассом является :active. Он дает возможность применять стили тогда, когда элемент находится в активном состоянии.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXe4UntzQBv3zIDgLT8vgKMxEKB_hFMzTbEhfA3SDaEJ3zJDN89KWHn_wzpVl5-v65xEIMOD2uXLOtHSuY8QtcKdvEDu8U1QT2Io6b4abf-Cczyxe20WCx54TC2M7wPP2IuAxk8tvuBbejGG1j0cti_3cJr2ZSgv2renhtBSi_oNRIzRo_ISJlY?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Ярким примером работы этого псевдокласса является нажатие на ссылку или кнопку.</p>



<p>Еще один распространенный псевдокласс – :focus. Он позволяет применять стили тогда, когда элемент находится в фокусе.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXenKDQRMX4vbfBiQgMm-5_ZsD-VCji0-TkwUtyiGMm3zfYkKCGT4ZzB1fe_asYYqIWvMnsqWScuYAifCEZACnZtqekpOaAkZlWBBU2GgtAww-A4eBMKfbwd_xErNBqOPTd5u05u5E0XrFV21KH8QmWvDp_BGTtUJvnZattPvFSzjwWWW8WmSYc?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Примером может служить нажатие на input. Выше можно увидеть фрагмент кода, наглядно демонстрирующий упомянутый псевдокласс.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span>Псевдоэлементы<span class="ez-toc-section-end"></span></h3>



<p>Псевдоэлементы – это тоже ключевые слова CSS. Они позволяют добавлять дополнительный контент на страницу, а также стилизовать те или иные части веб-сайта.</p>



<p>Псевдоэлементы можно отличить по характерной записи – двух двоеточий после селектора элемента (::). Как и в случае с псевдоклассами, псевдоэлементов много. Ниже – несколько самых распространенных примеров.</p>



<p>Первый псевдоэлемент – ::before. Он используется для добавления контента перед содержимым заданного компонента.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcBWKGDLlq6B_3QbSbyfDEQ-AYMaz4r6wuf1CWUcEt-naSmHOljSUlRXUyLM7qulp_wFKmkS63Vkq5I4wCkEk2DP1PhntscN2LMwsAXPcZk1uZhDofX8U7IFZlaLzD5_Hpf64eAQNC1AKY26qFaPUaOZrUqwfX6OZiP2seiSey4IfbeYNBSFQc?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Следующий псевдоэлемент – ::after. Применяется для добавления контента после содержимого того или иного компонента.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXc-1D6CR9au2DlHu7xJoWxjf3DowyLRskp15icgW8BdBIeTRlPobqkQ5lx-n8qocJv15wO4MN1yqdOTKridvd809c4PYif8pxFOmk9AnbQiG7BIFxocHBtJww0NKsGOuKKbqbLXfGpXeoq5TlY3KL0ka0nnJOgW_XQc__cwdtCrpqqvU3rxIqE?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Последним распространенным псевдоэлементом является ::first-line. Он дает возможность стилизировать первую строку текста, расположенную внутри того или иного компонента.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd8ycKeQVfVF6_BiOzzCel3tHOd8j5wjMHbAmO5nDanbA2D2RIBxVz8lH5IwJj8H9z1qrFpdWueIBfefftl6JoqFLYcUvYuabwVUKxMmQArIuxIKvMbUGfsDP3OSyoc4B2GonZk_bq4s8xvUQhWGpPWcvOrDGhMIDBzUOfcqxWc3o8OfweDtBk?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%BF%D0%BE%D1%82%D0%BE%D0%BC%D0%BA%D0%BE%D0%B2_%D0%B8_%D1%81%D0%BE%D1%81%D0%B5%D0%B4%D0%B5%D0%B9"></span>Селекторы потомков и соседей<span class="ez-toc-section-end"></span></h2>



<p>Еще одна категория селекторов – это селекторы потомков. Они направлены на выбор элементов, выступающих потомками других составляющих на страницах.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfeAGAb_7RqXSB4IiAC9lWASTKT5zczMvxvyNF65qoaRmj2LJKAVFrVWLHaE0EBk9vkwcGx7fDsGYeF8EfQItScTckxDSBxi7N45idj90oQpL6gCCmvm6wjxP_S53ulS0lV90ar24scUqlDmH_MzGhA6cNeQjZFn_Ye3kRlPKRjdzwxIbEukA?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Выше – наглядный пример реализации соответствующего инструмента верстки.</p>



<p>Селекторы соседей – еще один тип изучаемого компонента. Он дает возможность выбрать элементы, которые расположены непосредственно после других составляющих того же уровня.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfM3MaSRZx8ThI0CU6E8qVvsbbK5n91OI1Zr_3UHMpo9-R_SSTqlkbbQRcBr_1akrnyyC8jkeW0mzonCXph0UxcSLdM8mEKOlvA6HSnQ2oVC1U4-OcnImmKuxXiJEMeohJekz5vZ2pRha8K2bSLSokcxrKDKZFfXXWeuC1uGLGmeswKZvgwdcs?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Выше – фрагмент кода, использующий упомянутый инструмент на практике.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2_%D1%80%D0%B0%D0%B7%D0%BD%D0%BE%D0%BC_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B5"></span>Использование в разном контексте<span class="ez-toc-section-end"></span></h2>



<p>С основными селекторами в CSS ознакомиться удалось. Теперь необходимо рассмотреть направления, в которых они могут быть использованы. Существуют несколько вариантов:</p>



<ul>
<li>медиа-запросы;</li>



<li>CSS-анимация;</li>



<li>препроцессоры.</li>
</ul>



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



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%B8_%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D1%8B"></span>Селекторы и медиа-запросы<span class="ez-toc-section-end"></span></h3>



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



<p>Чтобы воспользоваться селекторами внутри медиа-запросов, необходимо определить этот самый запрос при помощи ключевого слова @media. Далее – задать условия, при которых он будет применяться. Теперь останется внутри блока медиа-запроса использовать селекторы и задавать те или иные стили компонентов веб-страницы.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdzBOdoOnrT4hzjexytFQss5KgpzOSRyF6wzx8r6AG3A_73MW5jbG2YRu00-TgbjGIST_YI-08cvzw-rM5KSo-tsH8FolYYzcfrkwxD2ORO43JV7LhEb6eAgtrolOHlFySHce0Lvqr0iWHfWcN4UXlPvOX7ZMf7ZyYX1DczdvLEvzz9C_RAGg?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeN5sXLmoGOMHRZihxzsRIGUuu_8qiBAFH0LmSwVakNZLvuIPLZgfdLpcFTgndW5EBdAU9IRqV5vp7Gp2LSgcxk0eZZvIvo5zdU-HyLLVVfWo5vMdJ6H2EnmSMw849J3tyySWaocwAbX3xYkPskv284NXOfoHtWUil8Qh0VvCBz4ZM0utdqSCA?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>В примере, написанном выше, была определена анимация rotate. Она использует селекторы 0 % и 100 % для определения начального и конечного состояний компонента в процессе реализации анимации. После этого анимация применяется к div. Для этого задействованы свойства:</p>



<ul>
<li>animation-name;</li>



<li>animation-duration;</li>



<li>animation-iteration-count;</li>



<li>animation-timing-function.</li>
</ul>



<p>Использование @keyframes дает возможность создания динамичной и красивой анимации в пределах имеющегося веб-сайта.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81%D0%BE%D1%80%D1%8B"></span>Препроцессоры<span class="ez-toc-section-end"></span></h3>



<p>Syntactically Awesome Sheets или Sass – язык препроцессора CSS. Он предлагает разработчикам мощные инструменты для создания более гибких и удобных стилей. Одним из наиболее эффективных средств верстки является использование селекторов в Sass.</p>



<p>В этом случае получится обращаться к элементам и их группам, а также изменять стили соответствующих составляющих. Вот наглядный пример шаблонного селектора %flex-element-center для центрирования компонентов по вертикали и горизонтали при помощи flexbox:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd570RCgvA3lhYmcl9JYNVEFgo15wkxXGLBHGoYg40_g77xpFFSQXIiGKEVg28P3OKhO32I0TF2FtUQBt9B0XP-OOb9vvIVNaui--oRtxhdMwEQfJQHH0yNXLDdkr6yAZsEVyEfz3Wa6EkuwjeCe6IRxVktS2G8KuUuOHh6DQglzFBRZHEgonk?key=sZTF_Rcv2XfuwbROc4h0hw" alt="Селекторы: кратко о главном"/></figure>



<p>Saas допускает использование разнообразных типов селекторов: классы, псевдоклассы, псевдоэлементы, идентификаторы и другие. Операторы комбинирования рассматриваемого инструмента, таки как «родитель», «потомок», «брат» и им подобные тоже допустимы.</p>



<p>Шаблонный селектор в Sass уменьшает количество повторяющегося кода. Проект за счет этого элемента становится более модульным и поддерживаемым.</p>



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



<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в&nbsp;<a href="https://otus.ru/?utm_source=oj" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>!</em>&nbsp;</p>
				
		</div><!-- .post-content -->
		
		<div class="the-post-foot cf">
		
						
			<div class="tag-share cf">
				
									<div class="post-tags"><a href="https://otus.ru/journal/tag/css/" rel="tag" data-wpel-link="internal">CSS</a><a href="https://otus.ru/journal/tag/programmirovanie/" rel="tag" data-wpel-link="internal">программирование</a></div>				
											<div class="post-share">
					
						
			<div class="post-share-icons cf">
			
				<span class="counters">

										
				</span>

								
					<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F&#038;text=%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B%3A%20%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%20%D0%BE%20%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%BC" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://www.linkedin.com/shareArticle?mini=true&#038;url=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fselektory-kratko-o-glavnom%2F&#038;media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2024%2F07%2Foj-1080x720-2024-07-14T173338.932.jpg&#038;description=%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B%3A%20%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%20%D0%BE%20%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%BC" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
									
								
			</div>
			
						
		</div>									
			</div>

			
		</div>
		
				
		
		
<div class="post-nav">


	<div class="post previous cf">
		<a href="https://otus.ru/journal/vvedenie-v-django-opisanie-frejmvorka-i-ego-osobennosti/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-left"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/vvedenie-v-django-opisanie-frejmvorka-i-ego-osobennosti/" class="image-link" rel="previous" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Введение в Django: описание фреймворка и его особенности" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T172125.523-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Введение в Django: описание фреймворка и его особенности" />			</a>
			
			<div class="post-meta">
				<span class="label">Prev Post</span>
			
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/vvedenie-v-django-opisanie-frejmvorka-i-ego-osobennosti/" data-wpel-link="internal">Введение в Django: описание фреймворка и его особенности</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/vvedenie-v-django-opisanie-frejmvorka-i-ego-osobennosti/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-07-14T14:21:41+00:00">14 июля, 2024</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">6 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	


	<div class="post next cf">
		<a href="https://otus.ru/journal/logirovanie-v-python/" title="Next Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-right"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/logirovanie-v-python/" class="image-link" rel="next" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Логирование в Python" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T181234.352-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Логирование в Python" />			</a>
			
			<div class="post-meta">
				<span class="label">Next Post</span>
				
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/logirovanie-v-python/" data-wpel-link="internal">Логирование в Python</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/logirovanie-v-python/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-07-14T15:12:49+00:00">14 июля, 2024</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">15 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	
</div>		
		

<section class="related-posts grid-3">

	<h4 class="section-head"><span class="title">Читать ещё</span></h4> 
	
	<div class="ts-row posts cf">
	
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
				</div>
			
			</div>

		</article >
		
		
	</div>
	
</section>

		
				
</article> <!-- .the-post -->	
			
		</div>
		
		<aside class="col-4 sidebar">

	<div class="inner">

					<ul>
				<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
	
	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
		</label>
		<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
	</form>

</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
			</ul>
		
	</div>

	</aside>		
	</div> <!-- .ts-row -->
</div> <!-- .main -->





<footer class="main-footer dark bold">

	

	


	
		<section class="lower-footer cf">
			<div class="wrap">

				
				
					<div class="links">
						<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</div>

				

				<p class="copyright"> © 2015-2026 OTUS				</p>



									<div class="to-top">
						<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
					</div>
				
			</div>
		</section>

	

</footer>

</div> <!-- .main-wrap -->



<div class="mobile-menu-container off-canvas" id="mobile-menu">

	<a href="#" class="close"><i class="fa fa-times"></i></a>

	<div class="logo">
			</div>

	
		<ul class="mobile-menu"></ul>

	</div>



	<div class="search-modal-wrap">

		<div class="search-modal-box" role="dialog" aria-modal="true">
			

	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />

		<button type="submit" class="search-submit visuallyhidden">Submit</button>

		<p class="message">
			Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel.		</p>
				
	</form>

		</div>
	</div>


<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"0"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"0","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/selektory-kratko-o-glavnom\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>

</body>

</html>
<!-- Cache served by breeze CACHE - Last modified: Mon, 09 Mar 2026 18:14:58 GMT -->