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