Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)

5 months ago | 11.6K

 

Всем приветствую, с вами Сергей Никонов и в этой статье я расскажу про псевдоклассы (pseudo classes), псевдоэлементы (pseudo elements) и как с помощью них задавать CSS-стили для вашего сайта. На примерах мы рассмотрим как с работают самые часто используемые псевдоклассы и псевдоэлементы при верстке сайтов.

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

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

 

Содержание

 

Что такое псевдоклассы (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, чтобы не пропустить полезные видео!
 
С вами был Сергей Никонов,
Успехов в обучении!


Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
12.7K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
17.9K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
10.5K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
13.4K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
16.3K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
27.3K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
76.8K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Новинка!
  • 128 заданий
  • 40 видео
  • 11 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Сергей Никонов
  • Новинка!
  • 30 заданий
  • 16 видео
  • 2 часа

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1600
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 640
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1094
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1379
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2423
Сергей Никонов
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4760
Сергей Никонов
  • 66 заданий
  • 32 видео
  • 5 часов