На этом уроке вы научитесь использовать комбинированные селекторы в CSS для стилизации HTML-элементов. Комбинированные селекторы позволяют выбирать элементы на основе их отношений друг с другом, что делает стилизацию более точной и эффективной. Вы разберётесь, как использовать такие селекторы, как потомки, дочерние элементы, соседние элементы и элементы с общими родителями. В этом уроке вы будете практиковаться в заполнении пропущенных частей кода, чтобы закрепить свои знания и навыки работы с комбинированными селекторами.
Список тем
- Модуль 1: Основы CSS
- Селекторы элементов.
- Селекторы классов и идентификаторов.
- Цвет текста и фона.
- Размеры и единицы измерения в CSS.
- Семейство шрифта и базовые свойства текста.
- Стилизация текста (жирный, курсив, подчеркивание).
- Выравнивание и интервалы текста.
- Комбинированные селекторы.
- Псевдоклассы для ссылок.
- Приоритеты стилей и каскадность.
- Наследование в CSS.
- Модуль 2: Блочная модель и позиционирование
- Блочная модель CSS (box model).
- Внутренние отступы (padding).
- Внешние отступы (margin).
- Границы элементов (border).
- Сокращенная запись свойств границ.
- Радиус скругления углов (border-radius).
- Свойство display и его значения.
- Блочные элементы (display: block).
- Строчные элементы (display: inline).
- Строчно-блочные элементы (display: inline-block).
- Скрытие элементов (display: none, visibility: hidden).
- Статичное позиционирование (position: static).
- Относительное позиционирование (position: relative).
- Абсолютное позиционирование (position: absolute).
- Фиксированное позиционирование (position: fixed).
- Липкое позиционирование (position: sticky).
- Свойство z-index и порядок наложения элементов.
- Свойство float и его применение.
- Свойство clear для обтекания.
- Центрирование элементов различными способами.
- Модуль 3: Селекторы CSS продвинутый уровень
- Групповые селекторы.
- Селекторы потомков (descendant selectors).
- Дочерние селекторы (child selectors).
- Соседние селекторы (adjacent sibling selectors).
- Общие сиблинги (general sibling selectors).
- Селекторы атрибутов: точное совпадение.
- Селекторы атрибутов: частичное совпадение.
- Псевдоклассы состояний (:hover, :active, :focus, :visited).
- Псевдоклассы для форм (:checked, :disabled, :required).
- Структурные псевдоклассы (:first-child, :last-child).
- Псевдоклассы :nth-child() и :nth-of-type().
- Псевдоклассы :not() и :empty.
- Псевдоэлементы ::before и ::after.
- Псевдоэлементы ::first-letter и ::first-line.
- Псевдоэлемент ::selection.
- Псевдоэлемент ::placeholder.
- Комбинирование псевдоклассов и псевдоэлементов.
- Создание декоративных элементов с помощью псевдоэлементов.
- Модуль 4: Работа с фоном и визуальными эффектами
- Фоновый цвет (background-color).
- Фоновое изображение (background-image).
- Повторение фона (background-repeat).
- Позиционирование фона (background-position).
- Размер фона (background-size).
- Фиксация фона (background-attachment).
- Сокращенная запись свойств фона.
- Множественные фоновые изображения.
- Линейные градиенты (linear-gradient).
- Радиальные градиенты (radial-gradient).
- Конические градиенты (conic-gradient).
- Тень блока (box-shadow).
- Тень текста (text-shadow).
- Прозрачность (opacity).
- Фильтры (filter: blur, grayscale, etc.).
- Режимы смешивания (mix-blend-mode, background-blend-mode).
- Маски с mask-image.
- Формы с clip-path.
- Модуль 5: Типографика продвинутый уровень
- Межстрочное расстояние (line-height).
- Интервалы между буквами (letter-spacing).
- Интервалы между словами (word-spacing).
- Трансформация текста (text-transform).
- Декорирование текста (text-decoration).
- Перенос слов (word-break, overflow-wrap).
- Управление пробелами (white-space).
- Многоколоночный текст (columns).
- Обрезка текста (text-overflow, ellipsis).
- Вертикальное выравнивание текста (vertical-align).
- Направление текста (direction, writing-mode).
- Веб-шрифты и @font-face.
- Модуль 6: Flexbox
- Введение в Flexbox.
- Включение Flexbox (display: flex).
- Flex-контейнер и flex-direction.
- Выравнивание с justify-content.
- Выравнивание с align-items.
- Выравнивание с align-content.
- Свойство align-self для отдельных элементов.
- Свойство flex-wrap.
- Свойство flex-flow (сокращение для direction и wrap).
- Свойство flex-grow.
- Свойство flex-shrink.
- Свойство flex-basis.
- Сокращенное свойство flex.
- Порядок элементов с order.
- Сложные макеты на Flexbox.
- Вложенные flex-контейнеры.
- Создание адаптивной навигационной панели с Flexbox.
- Модуль 7: CSS Grid Layout
- Введение в Grid Layout.
- Включение Grid Layout (display: grid).
- Создание сетки: grid-template-columns.
- Создание сетки: grid-template-rows.
- Единица измерения fr.
- Функция repeat().
- Промежутки с gap, row-gap, column-gap.
- Размещение элементов: grid-column.
- Размещение элементов: grid-row.
- Сокращенная запись grid-area.
- Именованные линии и области.
- Свойство grid-template-areas.
- Автоматическое размещение элементов.
- Автоматические треки (grid-auto-rows, grid-auto-columns).
- Управление потоком элементов (grid-auto-flow).
- Выравнивание в Grid: justify-items и align-items.
- Выравнивание в Grid: justify-content и align-content.
- Выравнивание отдельного элемента (justify-self, align-self).
- Сложные макеты на Grid.
- Комбинирование Grid и Flexbox.
- Модуль 8: Трансформации и переходы
- Трансформации: translate.
- Трансформации: scale.
- Трансформации: rotate.
- Трансформации: skew.
- Комбинирование трансформаций.
- Точка трансформации с transform-origin.
- 3D-трансформации и перспектива.
- Переходы с transition-property.
- Длительность перехода с transition-duration.
- Функции плавности с transition-timing-function.
- Задержка с transition-delay.
- Сокращенное свойство transition.
- Переходы для нескольких свойств.
- Создание интерактивных элементов с переходами.
- Производительность трансформаций и переходов.
- Модуль 9: Анимации
- Создание keyframes.
- Свойство animation-name.
- Свойство animation-duration.
- Свойство animation-timing-function.
- Свойство animation-delay.
- Свойство animation-iteration-count.
- Свойство animation-direction.
- Свойство animation-fill-mode.
- Свойство animation-play-state.
- Сокращенное свойство animation.
- Множественные анимации.
- Создание сложных анимаций.
- Анимации с использованием переменных.
- Оптимизация производительности анимаций.
- Анимации и доступность.
- Модуль 10: Адаптивный дизайн
- Относительные единицы измерения (%, em, rem).
- Единицы vh и vw.
- Медиа-запросы: основы.
- Медиа-запросы: max-width и min-width.
- Медиа-запросы: ориентация устройства.
- Медиа-запросы: типы устройств и медиа-функции.
- Mobile-first подход.
- Адаптивные изображения.
- Элемент picture и атрибуты srcset/sizes.
- Адаптивная типографика.
- Адаптивная навигация.
- Адаптивные таблицы.
- Адаптивные формы.
- Отзывчивые медиа (видео, iframe).
- Тестирование адаптивности.
- Модуль 11: Формы и CSS
- Базовая стилизация input и button.
- Стилизация textarea.
- Стилизация состояний форм (:focus, :valid, :invalid).
- Стилизация placeholder.
- Кастомизация radio и checkbox с помощью CSS.
- Стилизация select и option.
- Создание кастомных выпадающих списков.
- Стилизация range input.
- Стилизация file input.
- Валидация форм и стилизация сообщений об ошибках.
- Модуль 12: Современные возможности CSS
- Переменные CSS (Custom Properties).
- Область видимости переменных.
- Функция calc().
- Свойство object-fit для изображений.
- Свойство object-position.
- Scroll Snap.
- Контейнерные запросы (Container Queries).
- Подсеточные элементы (Subgrid).
- Логические свойства (logical properties).
- CSS Houdini (введение).
- Feature Queries (@supports).
- Новые селекторы CSS (is(), where(), has()).
- Модуль 13: Практические проекты
- Создание адаптивной навигационной панели.
- Создание карточек товаров.
- Создание слайдера изображений на CSS.
- Создание табов.
- Создание дропдаун-меню.
- Создание галереи изображений с фильтрами.
- Создание анимированных иконок.
- Создание адаптивного лендинга.
- Создание тёмной темы с CSS-переменными.
- Создание анимированных кнопок.
- Создание анимированных форм.
- Создание сетки изображений с hover-эффектами.
- Создание адаптивного футера.
- Создание макета блога на CSS Grid.
- Создание адаптивного дашборда.
- Создание интерактивной формы с анимациями.
- Создание CSS-арта.
Стилизация дочерних элементов
id: 37299_task1
Стилизация всех абзацев, которые являются непосредственными дочерними элементами внутри div с классом container. Убедитесь, что только прямые дочерние элементы получают стили.
CSS
.container input1 p { color: red; }HTML
<div class="container"><p>Это текст</p><div><p>Это не должен быть красным</p></div></div>
Чтобы выбрать только непосредственных потомков, используйте селектор дочерних элементов '>'. Например, 'div > p' выберет только те абзацы, которые являются прямыми дочерними элементами div.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Соседние элементы
id: 37299_task2
Стилизация первого абзаца, который идёт сразу после h2 заголовка. Используйте правильный селектор, чтобы применить стили только к этому элементу.
CSS
h2 input1 { margin-top: 0; }HTML
<h2>Заголовок</h2><p>Этот текст должен быть без отступа сверху</p><p>Этот текст не должен быть изменён</p>
Для выбора соседнего элемента используйте селектор '+' (сосед). Например, 'h2 + p' выберет первый абзац, который идёт непосредственно после h2.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Общие предки
id: 37299_task3
Примените стили к элементам span, которые находятся внутри div с классом wrapper, но только если они следуют за другим span элементом.
CSS
.wrapper span input1 { font-weight: bold; }HTML
<div class="wrapper"><span>Первый текст</span><span>Второй текст</span></div>
Используйте селектор общего предка. Например, '.wrapper span + span' выберет каждый span элемент, который находится в div с классом wrapper и следует за другим span.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Стилизация элементов потомков
id: 37299_task4
Стилизация всех элементов span, которые являются потомками div с классом content. Убедитесь, что все вложенные элементы span получают стили.
CSS
.content input1 { color: blue; }HTML
<div class="content"><span>Текст внутри</span><div><span>Ещё текст внутри</span></div></div>
Для выбора всех потомков используйте вложенный селектор. Например, '.content span' выберет все span элементы, которые находятся внутри div с классом content, независимо от их уровня вложенности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Комбинатор общего родителя
id: 37299_task5
Стилизация всех li элементов, которые являются потомками ul с классом list, но только если они непосредственно следуют за элементами li с классом special.
CSS
.list .special input1 { background-color: yellow; }HTML
<ul class="list"><li class="special">Особенный элемент</li><li>Этот элемент должен быть выделен</li><li>Этот не должен</li></ul>
Используйте селектор общего родителя и соседний селектор. Например, '.list .special + li' выберет li элементы, которые непосредственно следуют за li с классом special.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Стилизация по атрибутам
id: 37299_task6
Примените стили ко всем изображениям, которые находятся внутри div с классом gallery и имеют атрибут alt.
CSS
.gallery imginput1 { border: 2px solid black; }HTML
<div class="gallery"><img src="https://naytikurs.ru/img/1.png" alt="Картинка 1"><img src="https://naytikurs.ru/img/2.png"></div>
Выберите элементы по атрибуту, используя селектор атрибута. Например, '.gallery img[alt]' выберет все img элементы с атрибутом alt внутри div с классом gallery.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
