На этом уроке вы научитесь использовать комбинированные селекторы в 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-арта.
Стилизация дочерних элементов
Стилизация всех абзацев, которые являются непосредственными дочерними элементами внутри div с классом container. Убедитесь, что только прямые дочерние элементы получают стили.
CSS
.container input1 p { color: red; }HTML
<div class="container"><p>Это текст</p><div><p>Это не должен быть красным</p></div></div>
Чтобы выбрать только непосредственных потомков, используйте селектор дочерних элементов '>'. Например, 'div > p' выберет только те абзацы, которые являются прямыми дочерними элементами div.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Соседние элементы
Стилизация первого абзаца, который идёт сразу после h2 заголовка. Используйте правильный селектор, чтобы применить стили только к этому элементу.
CSS
h2 input1 { margin-top: 0; }HTML
<h2>Заголовок</h2><p>Этот текст должен быть без отступа сверху</p><p>Этот текст не должен быть изменён</p>
Для выбора соседнего элемента используйте селектор '+' (сосед). Например, 'h2 + p' выберет первый абзац, который идёт непосредственно после h2.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Общие предки
Примените стили к элементам 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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Стилизация элементов потомков
Стилизация всех элементов 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, независимо от их уровня вложенности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Комбинатор общего родителя
Стилизация всех 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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Стилизация по атрибутам
Примените стили ко всем изображениям, которые находятся внутри 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.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Загрузка...