ВСЁ, что нужно знать о CSS Селекторах. Типы селекторы css

• CSS селекторы позволяют описывать свойства элементов или групп элементов.  

• В видео будут рассмотрены основные CSS селекторы, необходимые для разработки сайтов.  

• Будут показаны примеры их применения и вариации.  

• Обращение по тегу позволяет стилизовать элементы по их имени.  

• Пример: .h1 {color: red} делает первый заголовок красным, а второй - нет.  

• Можно комбинировать теги через запятую для стилизации нескольких элементов.  

• Обращение по классу позволяет стилизовать элементы с одинаковыми классами.  

• Пример: .heading1, .heading2 {color: red} делает оба заголовка красными.  

• Классы можно комбинировать через запятую для стилизации нескольких элементов с одинаковыми классами.  

• Обращение по ID позволяет стилизовать элементы, но ID должен быть уникальным на странице.  

• Пример: #heading1 {color: red} делает первый элемент с ID "heading1" красным.  

• Рекомендуется использовать классы для стилизации, а не ID.  

• Обобщенный и соседний комбинаторы позволяют стилизовать элементы, находящиеся рядом.  

• Пример: button + button {margin-left: 20px} устанавливает отступ для соседних элементов.  

• Тильда ~ button устанавливает стилистику для всех элементов, независимо от их расположения.  

• Наследственный и потомственный комбинаторы позволяют стилизовать элементы в рамках их контейнеров.  

• Пример: container.container1 button {margin-left: 20px} стилизует кнопки только в первом контейнере.  

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

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

• Пример: селектор "батон" обрабатывается быстрее, чем "контейнер один батон".  

• Стрелка указывает на прямое потомство, например, "контейнер один батон" не работает, если "батон" не является прямым потомком.  

• "Звездочка" (*) обращается ко всем элементам, что может быть полезно для тестирования.  

• Пример: "контейнер два *" окрашивает все элементы в желтый цвет.  

• Рекомендуется использовать редко из-за высокой нагрузки на браузер.  

• Пример: ссылки с атрибутами "экстернал" и "интернал" окрашиваются по-разному.  

• Знак доллара "$" позволяет применять стили к элементам с определенным окончанием.  

• Пример: "экстернал $" окрашивает только внешние ссылки.  

• Пример: меню с элементами "атом" и "лист".  

• Псевдоселекторы "ферст чайлд" и "ласт чайлд" позволяют стилизовать первый и последний элементы списка.  

• Псевдоселектор "нот" позволяет избежать переопределения стилей.  

• Пример: таблицы с зеброй, где первая строка белая, вторая серая и т.д.  

• Псевдоселекторы "энташ" и "ивен" позволяют стилизовать четные и нечетные элементы таблицы.  

• Пример: "энташ от" окрашивает нечетные строки, "ивен" - четные.  

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

• Пример: каждый третий элемент с начала.  

• Псевдокласс :empty применяется к пустым элементам.  

• Псевдокласс :link изменяет стили ссылок.  

• Пример: изменение фона и текста ссылки.  

• Псевдокласс :hover применяется при наведении мыши.  

• Псевдокласс :checked изменяет стили чекбоксов.  

• Пример: изменение расстояния при проверке чекбокса.  

• Обзор различных селекторов: классы, ID, теги, соседний элемент, все элементы рядом, наследование, дочерние элементы.  

• Псевдоклассы: not, empty, checked, focused, active.  

• Универсальный селектор: звездочка.  

• Рекомендации по использованию селекторов и ссылки на дополнительные ресурсы.