Внимание! В материалах сайта используются несколько ссылок на посторонние ресурсы. Но из-за сегодняшней ситуации в мире, некоторые сайты по этим ссылкам могут быть заблокированы. Чтобы исключить блокировку, рекомендуем установить программное обеспечение VPN.

CSS - Псевдоклассы

Что такое псевдоклассы?

Псевдокласс - это специальное ключевое слово, которое добавляется к css-селектору - с ним можно задавать стили для отображения HTML-элементов при различных факторах. К примеру, можно задать CSS-стили для HTML-элемента на который пользователь навел курсор мыши.

 

Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса.

 

 


 

Псевдокласс [: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: “”:

 

 

Обратите внимание, что в отличии от псевдоклассов, перед псевдоэлементами ставится два двоеточия. Прочитать о других псевдоэлементах вы можете в документации.


 

Заключение:

В этой статье мы рассмотрели самые используемые псевдоклассы и псевдоэлементы, которые используют профессионалы при разработке и создании сайтов.

 

Источник: Fructcode.com, Codepen.io

 

 

   
Добавить комментарий