CSS. Основные псевдоклассы и псевдоэлементы

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

Псевдо-классы. Зачем и как применять

  В CSS псевдокласс применяются когда необходимо стилизовать элемент или его часть в существующем дереве документа, без использования скриптов JavaScript или других. Псевдоклассы добавляются к основному селектору через двоеточие ":".

  Наиболее часто используемые псевдо-классы:
  :first-child,
  :last-child,
  :nth-child(),
  :nth-of-type(),
  :hover,
  :focus,
  :active.

  Псевдокласс :first-child, выбирает первый из набора дочерних элементов основного элемента.

  Пример:

<ul id='ex-list'>
 <li>Первый</li>
 <li>Второй</li>
 <li>Третий</li>
</ul>

#ex-list li:first-child {
 background-color: lightgreen;
}

  В списке, с помощью этого псевдо-класса будет изменена первая строчка.

• Первый
• Второй
• Третий

  Псевдокласс :last-child выбирает последний элемент из набора дочерних элементов.

  Используя :nth-child() и :nth-of-type(), с помощью значений вносимых в скобки, можно выбрать указанный элемент в наборе дочерних элементов, а не только первый или последний.
  Значением может быть целое число, выражение или специальные операторы: odd - все нечетные элементы, even - все четные.

  - :nth-child() применяется если выбранный элемент действительно занимает указанную позицию из всех, имеющихся в наборе, дочерних элементов;
  - :nth-of-type() применяется если элемент занимает указанную позицию в наборе выбранных элементов. Подробнее

  Псевдокласс :hover изменяет элемент при наведении курсора, при этом изменяемый элемент необязательно именно тот, на котором находится указатель.

  Пример:

<span class='elt'>Наведи на меня!</span><span class='sec-elt'>+</span>

.elt {
 display: inline-block;
 font: normal normal 24px/24px Arial, sans-serif;
}
.elt:hover {
 background: lightblue;
}
.sec-elt {
 display: inline-block;
 font: normal bold 64px/64px Arial, sans-serif;
 color: green;
 vertical-align: middle;
 overflow: hidden;
 transform: rotate(45deg);
 transition: all 1s ease;
 height: 64px;
 width: 0px;
}
.elt:hover + .sec-elt {
 transform: rotate(360deg);
 width: 64px;
}

  При наведении на основной блок, появится соседний в виде знака "плюс":

Наведи на меня!+

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

<span class='elt-focus' tabindex='1'>Кликни по мне!</span><span class='sec-elt-focus'>+</span>

.elt-focus {
 display: inline-block;
 font: normal normal 24px/24px Arial, sans-serif;
}
.elt-focus:focus {
 background: lightblue;
 outline: none; /*убирает рамку вокруг элемента в фокусе*/
}
.sec-elt-focus {
 display: inline-block;
 font: normal bold 64px/64px Arial, sans-serif;
 color: green;
 vertical-align: middle;
 overflow: hidden;
 transform: rotate(45deg);
 transition: all 1s ease;
 height: 64px;
 width: 0px;
}
.elt-focus:focus + .sec-elt-focus {
 transform: rotate(360deg);
 width: 64px;
}

  При клике по надписи, появится соседний в виде знака "плюс":

Кликни по мне!+

  Когда элемент теряет фокус, действие псевдокласса заканчивается. Благодаря своей простоте псевдокласс :focus широко применяется при создании различных меню, всплывающих подсказок и блоков с вкладками.

Псевдо-элементы. Что с их помощью можно сделать

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

  ::first-line - использует первую линию текста в указанном элементе;
  ::first-letter - использует первую букву текста выбранного элемента;
  ::selection - выбирает часть элемента, который выбран пользователем;
  ::before - добавляет некоторое содержимое перед выбранным элементом;
  ::after - добавляет некоторое содержимое после выбранного элемента.

  Используя псевдоэлементы ::before и ::after, возможно реализовать необычные элементы оформления, а через обязательное свойство content, можно разместить дополнительный контент без добавления новых тегов в HTML-коде документа.

  Пример:

<span class='elt-ba'>Я Элемент!</span>

.elt-ba {
 display: inline-block;
 font: normal normal 24px/24px Arial, sans-serif;
}
.elt-ba::after,
.elt-ba::before {
 display: inline-block;
 margin: 0 5px;
 padding: 1px 2px;
}
.elt-ba::before {
 content: url('//favicon.yandex.net/favicon/www.magentawave.com');
}
.elt-ba::after {
 content: ':after';
 background: lightblue;
}

Я Элемент!

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



Для изменения положения слоя используется свойство z-index с отрицательным или положительным значением в зависимости от потребности

©http://magentawave.com