Блог
Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)
3 years ago
18K
Sergei Nikonov
Всем приветствую, с вами Сергей Никонов и в этой статье я расскажу про псевдоклассы (pseudo classes), псевдоэлементы (pseudo elements) и как с помощью них задавать CSS-стили для вашего сайта. На примерах мы рассмотрим как с работают самые часто используемые псевдоклассы и псевдоэлементы при верстке сайтов.
Это один из уроков курса по верстке веб-сайтов HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровне, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Содержание
- Что такое псевдоклассы (pseudo classes)
- Псевдокласс :hover
- Псевдокласс :active
- Псевдокласс :focus
- Псевдоклассы :first-child и :last-child
- Псевдоклассы :first-of-type и :last-of-type
- Псевдокласс :nth-child
- Псевдокласс :not
- Что такое псевдоэлементы (pseudo elements)
Что такое псевдоклассы (pseudo classes)
Псевдокласс (pseudo class) - это специальное ключевое слово, которое добавляется к css-селектору (css selector), с помощью которого можно задавать стили для отображения HTML-элементов при различных факторах. К примеру, можно задать CSS-стили для HTML-элемента на который пользователь навел курсор мыши.
Если вы еще не знакомы с понятием CSS-селектор (css selector) и не знаете, что такое CSS-селекторы (css selectors), прочитайте об этом статью или посмотрите видеоурок из курса HTML/CSS Advanced, а для закрепления ваших знаний, пройдите интерактивные упражнения.
Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса, например, так задается псевдокласс :hover для HTML-тега <a>: a:hover {…}.
Смотрите видео "Что такое псевдоклассы(pseudo classes) и псевдоэлементы(pseudo elements)"
Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!
Псевдокласс :hover
Псевдокласс :hover позволяет задавать CSS-стили при наведении курсора мыши на HTML-элемент.
Посмотрите на этот пример. Наведите курсор мыши на ссылку Link и вы увидите, что цвет ссылки, при наведении на него курсора мыши, изменился на цвет “brown”:
Псевдокласс :active
С помощью псевдокласса :active мы можем задавать CSS-стили в момент клика на HTML-элемент мышью.
Посмотрите пример ниже. Наведите курсор мыши на надпись Link, затем нажмите левой кнопкой мыши на надпись Link и не отпускайте кнопку мыши. Вы увидите, что ссылка в момент клика мышью стала зеленого цвета:
Псевдоклассы :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/CSS Advanced.
Как я говорил ранее, для того, чтобы применялись стили к 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.
Что такое псевдоэлементы (pseudo elements)
Псевдоэлемент (pseudo element) - это это специальное ключевое слово, которое добавляется к css-селектору и позволяет задавать стили для части выбранного HTML-элемента.
Псевдоэлементы ::before и ::after
Псевдоэлементы ::before и ::after используются очень часто при верстке сайтов на профессиональном уровне.
Суть этих псевдоэлементов очень простая: С помощью псевдоэлемента ::before вы можете присоединить к существующему HTML-тегу какой-то контент ДО этого HTML-элемента, а с помощью псевдоэлемента ::after ПОСЛЕ HTML-элемента.
И сразу давайте перейдем к примеру ::before и ::after. У нас есть HTML-тег <p> и в него помещен текст “Have a good day!”. И с помощью псевдоклассов ::before и ::after мы добавляем “сердечки” слева и справа от надписи “Have a good day!”:
Обратите внимание, что в отличии от псевдоклассов, перед псевдоэлементами ставится два двоеточия. Прочитать о других псевдоэлементах вы можете в документации.
Вывод
В этой статье мы рассмотрели самые используемые псевдоклассы и псевдоэлементы, которые используют frontend-разработчики создавая верстку сайтов на профессиональном уровне.
А если вы хотите научиться верстать с нуля до уровня профессионала, я рекомендую пройти мой интерактивный курс HTML/CSS Advanced. Курс HTML/CSS Advanced разделен на две части, на теоретическую часть, где вы познакомитесь с основами HTML и CSS и на практическую часть, где мы будем создавать верстку сайта KinoMonster (КиноМонстер).
Кстати, у меня есть YouTube канал FructCode, где я переодически публикую полезные видео о верстке веб-сайтов и программировании. Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!
С вами был Сергей Никонов,
Успехов в обучении!