CSS - Псевдоклассы
Что такое псевдоклассы?
Псевдокласс - это специальное ключевое слово, которое добавляется к CSS-селектору - с ним можно задавать стили для отображения HTML-элементов при различных факторах.
К примеру, можно задать CSS-стили для HTML-элемента на который пользователь навел курсор мыши.
Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса.
Внимание! Весь код в примерах отредактирован на сервисе C D E P E N.
Чтобы получить визуальную информацию — нажмите в редакторе на вкладку Result.
Псевдокласс [:hover] и [:active]
Псевдокласс :hover позволяет задавать CSS-стили при наведении курсора мыши на HTML-элемент.
С помощью псевдокласса :active мы можем задавать CSS-стили в момент клика на HTML-элемент мышью.
Посмотрите на пример ниже:
Наведите курсор мыши на любую ссылку и вы увидите, что цвет ссылки, изменился на красный цвет.
Затем нажмите левой кнопкой мыши на название (Ссылка), и не отпускайте кнопку мыши. Вы увидите, что ссылка в момент клика мышью стала синего цвета.
Псевдоклассы :hover и :active работают не только с HTML-тегом <a>. Вы можете заменить в CSS-стилях “a” на любой другой HTML-тег или название - классы и стили применяются к этому HTML-элементу.
Псевдокласс [:focus]
Псевдокласс :focus позволяет задавать стили для HTML-тегов таких, как - <input>, <textarea>, <checkbox> и других при установке курсора мыши в этот элемент.
Посмотрите пример ниже с HTML-формой. Если вы установите курсор мыши в поле <input>, фоновый цвет поля изменится от клика:
Псевдокласс [:first-child] и [:last-child]
С помощью псевдокласса :first-child вы можете задавать стили для первого HTML-элемента, который является первым у своего родителя (parent).
Чтобы было проще понять как работает :first-child, посмотрите пример ниже. В маркированном списке выделяется цветом первый элемент <li>, а его родителем (parent) является тег <ul>:
С помощью псевдокласса :last-child вы можете задавать CSS-стили для последнего HTML-элемента.
Посмотрите пример ниже. Благодаря псевдоклассу :last-child выделяется цветом последний HTML-элемент <li> в маркированном списке:
Кстати, если вы еще не знаете, что такое маркированные списки (HTML-теги <ul> <li>), которые используются в этих примерах или что такое нумерованные списки (html теги <ol> <li>), почитайте этот материал на нашем блоге.
Как было сказано выше, для того, чтобы применялись стили к HTML-элементу, заданных с помощью псевдоклассов :first-child и :last-child, у элемента должен быть родитель (parent). Если родитель отсутствует, тогда стили не сработают.
Посмотрите пример ниже. У тега <span> есть родительский тег <div> и стили с :first-child работают, а для <span> без родительского тега :first-child и :last-child не будут работать:
Обратите внимание, что в текущей спецификации Selectors Level 3, при использовании псевдоклассов :first-child и :last-child элемент должен иметь родителя (parent), чтобы сработали CSS-стили.
В новой разрабатываемой версии спецификации Selectors Level 4 для срабатывания стилей заданных с помощью :first-child, :last-child, элемент может не иметь родителя.
Псевдокласс [:first-of-type] и [:last-of-type]
С помощью псевдоклассов :first-of-type и :last-of-type можно задавать стили для первого и последнего потомка (child) соответственно своего типа среди детей (child) его родителя (parent).
Определение звучит сложно и не очень понятно. Поэтому лучше сразу перейти к примерам, чтобы вы быстро поняли как работают псевдоклассы :first-of-type и :last-of-type.
В этом примере, с помощью псевдокласса :first-of-type можно выделить цветом все первые элементы <li> в маркированном списке с текстом “First”:
Точно такой же результат вы можете получить и с помощью псевдокласса :first-child, но не сможете выделить все последние элементы маркированного списка с надписью Third во всех вложенностях с помощью :last-child, зато такой результат вы сможете получить с помощью псевдокласса :last-of-type:
Псевдокласс [:nth-child]
С помощью псевдокласса :nth-child вы можете задавать стили для одного или более HTML-элементов, которые будут основываться на их позиции среди HTML-элементов соседей.
Звучит сложно и непонятно, согласен. Но не будем отчаиваться и очень быстро все поймем на примерах ниже.
Например, в нашем любимом маркированном списке мы хотим выделить цветом какой-то определенный элемент <li> под номером три. Для этого в CSS-стилях нам достаточно добавить псевдокласс :nth-child к <li> вот таким образом: li:nth-child(3) и в результате мы сделаем то, что хотели:
Но этим возможности псевдокласса :nth-child не ограничиваются и мы можем выделить все нечетные HTML-элементы <li> из нашего маркированного списка, написав несколько символов кода: li:nth-child(odd). Ключевое слово “odd” внутри скобок псевдокласса :nth-child как раз задает этот правило:
С помощью ключевого слова (even) внутри скобок псевдокласса :nth-child мы можем наоборот выделить цветом все четные HTML-элементы <li> из нашего маркированного списка:
И на этом возможности псевдокласса :nth-child не заканчиваются и можно написать другие сложные правила выборки HTML-элементов к которым применить CSS-стили... Об этом вы можете ознакомиться с документацией к псевдоклассу :nth-child.
Псевдокласс [:not]
С помощью псевдокласса :not вы можете задать CSS-стили для которые не будут соответствовать заданному селектору.
Простыми словами, вы можете в псевдокласс :not, в его скобки, указать любой класс или элемент и CSS-стили будут заданы всем соседям данного элемента, кроме него самого.
Если все еще непонятно, что такое псевдокласс :not вот вам наглядный пример, с моим любимым маркированным списком.
В четвертый HTML-элемент <li> мы задали класс .not-color и задали стили для <li>, указав в скобках название класса - :not(.not-color).
И в результате у нас окрашиваются все другие элементы <li>, кроме <li> с классом .not-color:
И если вы переместите класс .not-color соседний <li>, выше или ниже, будут закрашиваться цветом все <li>, кроме <li> с классом .not-color.
ПСЕВДОЭЛЕМЕНТЫ
Что такое псевдоэлементы?
Псевдоэлемент - это специальное ключевое слово, которое добавляется к CSS--селектору и позволяет задавать стили для части выбранного HTML-элемента.
Псевдоэлементы [::before] и [::after]
Псевдоэлементы ::before и ::after используются очень часто при верстке сайтов на профессиональном уровне.
Суть этих псевдоэлементов очень простая: С помощью псевдоэлемента ::before вы можете присоединить к существующему HTML-тегу какой-то контент до этого HTML-элемента, а с помощью псевдоэлемента ::after - после HTML-элемента.
И сразу давайте перейдем к примеру ::before и ::after.
У нас есть HTML-тег <p> и в него помещен текст “Хорошего дня!”. И с помощью псевдоклассов: ::before и ::after добавляем “сердечки” слева и справа в значение стилей - content: “”:
Обратите внимание, что в отличии от псевдоклассов, перед псевдоэлементами ставится два двоеточия. Прочитать о других псевдоэлементах вы можете в документации.
Заключение:
В этой статье мы рассмотрели самые используемые псевдоклассы и псевдоэлементы, которые используют профессионалы при разработке и создании сайтов.
