Что такое псевдоклассы?
Этот вопрос проверяет знание о том, как можно менять стили элементов при различных взаимодействиях.
Короткий ответ
Псевдоклассы — это ключевые слова в CSS, которые добавляют специальные состояния к селекторам. Например, :hover изменяет стиль элемента, когда на него наводят курсор мыши. Другие примеры включают :focus, который применяется к элементам ввода, когда они активны, и :nth-child(), который позволяет выбирать элементы по их порядковому номеру. Псевдоклассы упрощают стилизацию взаимодействий и состояний без необходимости добавлять дополнительные классы в HTML.
Длинный ответ
Псевдоклассы в CSS позволяют применять стили к элементам на основе их состояния, позиции или других критериев, не требуя изменения HTML. Они начинаются с двоеточия и могут использоваться для различных сценариев. Основные псевдоклассы включают:
• :hover: Применяется, когда курсор находится над элементом. Например, можно изменить цвет фона кнопки, когда на нее наводят мышь.
• :focus: Используется для элементов ввода, когда они активны. Это полезно для улучшения доступности.
• :active: Применяется, когда элемент активно нажат, например, для кнопок.
• :nth-child(): Позволяет выбирать элементы на основе их порядка. Например, можно выбрать каждый второй элемент списка:
li:nth-child(2n) {
background-color: lightgray;
}