Как использовать псевдоклассы CSS?

Как использовать псевдоклассы CSS?

Приветствую вас, дорогие друзья!

Хотите узнать, как использовать псевдоклассы CSS для быстрого изменения оформление определенных блоков на вашем сайте не внося правок в HTML или PHP-код? Тогда читайте статью до конца! В ней я расскажу о том, какие возможности дают нам псевдоклассы CSS, каких видов они бывают, и покажу несколько конкретных примеров их практического применения.

Идея использования псевдоклассов заключается в том, что мы можем в CSS к какому-то тегу, классу или идентификатору дописать определенное кодовое слово, далее задать набор нужных нам CSS-свойств, и таким образом повлиять на внешнее оформление практически любого элемента на нашем сайте, в зависимости от его состояния, положения на странице и даже принадлежности к тому или иному языку. Это очень удобно и активно используется в современной вёрстке!

При этом наш элемент будет вести себя так, как будто бы мы присваивали ему какой-то свой новый CSS-класс. Хотя, по факту, мы никакого нового класса ему не задавали!

В одой из прошлых статей я показывала как работать с псевдоэлементами CSS, если ещё не читали – обязательно ознакомьтесь, уверена, что вам это пригодится!

«Как работать c before и after в CSS?»

Все псевдоклассы CSS условно разделяют на несколько групп:

  • Структурные псевдоклассы
  • Динамические псевдоклассы
  • Языковые псевдоклассы
  • Псевдоклассы отрицания др.

Структурные псевдклассы CSS

Итак, предположим, у нас на сайте есть блок, внутри которого расположены другие элементы. Это могут быть отдельные блоки, пункты списка, абзацы, ссылки и так далее.

Если нам нужно каким-то образом изменить оформление первого элемента внутри этого блока, то мы можем использовать псевдокласс first-child.
Давайте разберём пример с таким кодом страницы:

У нас есть блок с классом iw-blocks, внутри которого находится несколько блоков с одинаковыми классами. Так же у них может не быть этих классов, и, тем не менее, мы сможем обратиться к любому из них, и дописать нужные CSS-свойства.

Чтобы дописать CSS свойства только для первого элемента нам нужно:

  1. 1.Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
  2. 2.Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
  3. 3.Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать:
    :first-child
  4. 4.В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.

После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.

Пример работы псевдокласса

Бывают ситуации, когда нам нужно обратиться к элементу, стоящему внутри блока, к которому мы применяем псевдокласс.

В этом случае пишем так:

Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.

:nth-last-child – применяет стили для последнего дочернего элемента.

Например:

CSS:

  • :nth-last-child(3) – применяет стили для третьего дочернего элемента с конца. Вместо значения 3 может стоять любое число.
  • :nth-child(2) — применяет стили для второго дочернего элемента по порядку. В скобках может стоять любое другое число.
  • :nth-child(2n) — этот псевдокласс применяет стили для каждого второго дочернего элемента по порядку.
  • Как обратиться к четным элементам
  • :nth-child(even) — срабатывает для элементов с чётными порядковыми номерами.
  • :nth-child(odd) — срабатывает для элементов с нечётными порядковыми номерами.
  • .block span:first-of-type — применяется для первого тега span, стоящего внутри тега с классом block. Вместо span может указываться любой тег.
  • .block span:nth-last-of-type – срабатывает для последнего span в теге с указанным классом.
  • .block span:nth-of-type(3) —стили применятся для третьего тега span внутри тега с классом block.

Так же есть и другие структурные псевдоклассы CSS, но они используются значительно реже.

  • :only-child — сработает, если элемент является единственным дочерним.
  • :only-of-type — применяет слили для единственного элемента указанного типа в родительском блоке.
  • :empty — сработает для элемента, который не имеет вложенных тегов.
  • :root – корневой элемент на странице.

Динамические псевдоклассы CSS

  • :hover — этот псевдокласс применит CSS стили для элемента при наведении на него курсора мышки.
  • :focus, :active — позволяет применить нужные CSS свойства для ссылок, полей форм, кнопок и других элементов, которые активировали (выделили) кликом мышки или переходом при помощи клавиши TAB на клавиатуре.
  • :link — псевдокласс для ссылки, по которой не осуществлялся переход.
  • :visited — псевдокласс для ссылки, по которой посетитель уже переходил.

Псевдокласс отрицания

div:not(.price) – применит CSS свойства для всех блоков div, кроме блоков с классом price

Так же можно вместо класса указывать названия тегов или использовать другие псевдоклассы:

span:not(:last-child) – псевдокласс применит CSS свойства ко всем тегам span кроме последнего.

Использование языкового псевдокласса CSS

Так же мы можем использовать псевдокласс :lang() для выделения блоков принадлежащих к определённому языку.

Для того чтобы браузеру было понятно какой это язык у блока должен стоять атрибут с кодом языка

Далее в CSS нужно будет указать псевдокласс :lang(en) со значением языка.

CSS:

Видеоинструкция

Вот такие вот интересные возможности дают нам псевдоклассы CSS. А вы используете псевдоклассы для стилизации сайта? Если да, то напишите в комментариях какие.

На этом у меня всё! Успехов вам!

С уважением Юлия Гусарь

Подписаться на рассылку

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

comments powered by HyperComments

1 комментарий

  1. По этому принципу я разработал создание лэндинга на вордпресс, когда ты добавляешь рубрику и создаешь из постов лэндинг, где каждый блок имеет свое оформление.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif