Другое

Селекторы потомков. Псевдоклассы, псевдоэлементы и псевдоселекторы CSS

Lorem ipsum dolor

Селекторы в CSS — это важнейший механизм в таблице стилей, благодаря которому можно определять стили каждому отдельному элементу веб-страницы. Другими словами, селектор — это указатель на элемент страницы, к которому нужно применить описываемый стиль. Помимо основных селекторов, о которых речь пойдет чуть ниже, в CSS еще присутствуют псевдоселекторы: псевдоклассы и псевдоэлементы. О них мы тоже поговорим чуть ниже.

Напомним, CSS — это каскадная таблица стилей, которая отвечает за внешний вид веб-страницы. В таблицах CSS для каждого элемента на странице можно задать:

  • место отображения,

  • цвет,

  • размер,

  • расположение относительно других элементов,

  • анимацию,

  • и др.

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

Основные селекторы CSS

Селектор — это способ обратиться к элементу страницы. Каждый стиль в таблице пишется по такому шаблону:

    <имя селектора> {

    <описание стилей>

    }

 

То есть вначале мы указываем селектор, а потом в фигурных скобках описываем стили, которые хотим применить к элементу, который располагается под этим селектором.

Основные селекторы:

  1. Универсальный селектор. Этот селектор обозначается звездочкой «*». Это общий селектор. Если прописать под ним стили, то они будут применяться ко всем элементам страницы. 

  2. «Имя тега». Этот тот случай, когда мы хотим применить определенный стиль к HTML-элементу. В качестве селектора могут выступать теги: «p», «div», «ul», «ol», «body», «form» и др. После обозначения селектора HTML-тегом стили применяются ко всем элементам страницы с таким тегом.

  3. «Имя класса». Это уже более «узкий селектор». Класс элементу назначает сам разработчик в атрибутах HTML-элемента. Если прописать стили под именем класса, они будут применяться ко всем элементам, которым разработчик задал такой класс. Важно отметить, что класс можно применять ко многим элементам на одной странице. Таким образом, при помощи обозначения класса обычно задают внешний вид элементам, которые должны вести себя одинаково. Например, фотографии в галереи, миниатюры постов, абзацы, пункты меню и др.

  4. «Имя идентификатора». Идентификатор служит еще более «узким» селектором. Он задается одному конкретному элементу. Все стили, прописанные под селектором-идентификатором, будут применяться только к одному элементу. На одной странице не может быть нескольких одинаковых идентификаторов.

С основными видами селекторов мы закончили. Переходим к псевдоселекторам.

Псевдоселекторы, псевдоэлементы и псевдоклассы в CSS

Псевдоклассы — это селекторы, которые определяют элементы на странице не по классам, прописанным разработчиком, а по специфическому состоянию HTML-элементов. Например, когда на элемент страницы наводится курсор мыши, он переходит в специфическое состояние. Чтобы задать обычный стиль этому элементу, мы используем какой-нибудь основной селектор, а чтобы задать стиль при наведении курсора на него, мы используем псевдокласс. При описании стилей псевдокласса его селектор всегда начинается с «двоеточия»:

    :<имя псевдокласса> {

        <описываем стили>

    }

 

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

Псевдоклассы CSS, которые отвечают за действия пользователя

Псевдоклассы, которые «включаются» при определенных действиях пользователя:

  1. «:hover». Этот псевдокласс используется, когда мы хотим задать стили элементу, на который навели курсор. В этом случае синтаксис селектора будет таким: «<селектор элемента> :hover».

  2. «:focus». Этот псевдокласс помогает задать стиль элементу, на котором сфокусировано внимание пользователя. Например, пользователь заполняет какую-то форму на сайте. В момент заполнения формы ее можно как-то выделить при помощи данного псевдокласса.

  3. «:link» и «visited». Эти псевдоклассы применяются исключительно к ссылкам. Первый задает стили ссылке, которую еще не посетили, а второй ссылке, которую уже посетили.

  4. «:active». Этот псевдокласс используется в тот момент, когда пользователь активно взаимодействует с элементом страницы. Например, пользователь только нажал на ссылку или кнопку, но еще не отпустил их.

Псевдоклассы, которые определяют «соседство» html-элементов

Псевдоклассы, которые отвечают за расположение дочернего элемента в родительском, иногда называю псевдоклассами «соседства».

Псевдоклассы «соседства»:

  1. «:first-child». Этот псевдокласс всегда определяет первый элемент собственного родителя. Например, у нас есть большой текст, и мы хотим выделить в нем стилями первый абзац. В этом случае мы к тексту применяем данный псевдокласс и описываем стили. Псевдокласс «привязывается» не к конкретному элементу, а лишь к его расположению. Например, в начале нашего текста добавляем новый абзац — теперь он будет попадать под действие этого псевдокласса.

  2. «:last-child». Работает точно так же, как и первый псевдокласс, но только с последними дочерними элементами родителя.

  3. «:only-child». Этот псевдокласс определяет все дочерние элементы родительского класса, при условии что они являются единственными у своего родителя.

  4. «:nth-child(номер элемента)». Этот псевдокласс позволяет обратиться к конкретному номеру элемента своего родителя. Например, у вас на сайте реализован список, вы хотите выбрать конкретный пункт списка и выделить его стилями — тогда вам поможет данный псевдокласс.

Это не все псевдоклассы. Если в описанных выше псевдоклассах заменить слово «child» на «of-type», тогда мы получим серию псевдоклассов, которые будут определять дочерний элемент по его типу, а не место расположения. Например, у вас есть некий блок, внутри которого много разных элементов:

<section>

  <h2>…</h2>

  <p>…</p>

  <form>…</form>

  <h3>…</h3>

  <p>…</p>

  <p>…</p>

     </section>

 

Если прописать псевдокласс «p: first-child», тогда в этом случае ни один элемент не будет выбран, потому что первым дочерним элементом не является абзац. Но если прописать псевдокласс «p:first-of-type», тогда будет выбран «первый абзац», хотя фактически он является вторым дочерним элементом. В остальном «child» и «of-type» работают идентично. Но и на этом псевдоклассы не заканчиваются. Мы привели лишь те, которые наиболее часто применяются. 

Псевдоэлементы CSS

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

::<имя псевдоэлемента>

Несколько основных псевдоэлементов, которые наиболее часто используются:

  1. «::after». Определяет псевдоэлемент, который появится после существующего, родительским элементом.

  2. «::before». Определяет псевдоэлемент, который появляется перед существующим, родительским элементом.

Эти два псевдоэлемента используются наиболее часто в таблицах стилей. Есть еще несколько, но они используются в специфичных случаях и крайне редко.

Заключение

Псевдоклассы и псевдоэлементы CSS представляют собой общую категорию — псевдоселекторы. Сегодня мы показали часто используемые псевдоселекторы. Теперь вы можете при помощи стилей CSS обозначить последний или первый элементы родительского элемента, создавать псевдоэлементы и многое другое.

Схожие статьи

IntelliJ IDEA: как работать в этой среде начинающим программистам
Другое

IntelliJ IDEA: как работать в этой среде начинающим программистам

Как создать собственное мобильное приложение: руководство от А до Я
Другое

Как создать собственное мобильное приложение: руководство от А до Я

Raspberry Pi: температура процессора, ее измерение и уровень нормы
Другое

Raspberry Pi: температура процессора, ее измерение и уровень нормы

Что такое язык программирования Dart и в чем его особенность
Другое

Что такое язык программирования Dart и в чем его особенность

×