Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

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

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

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

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

<основной селектор>:<псевдоэлемент> { <стиль> }

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу (увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).

Рассмотрим применение first-letter на примере создание выступающего инициала:

<style>
  P {
    font-family: Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 100%; /* Размер шрифта */
    color: black; /* Черный цвет текста */
  }
  P:first-letter {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200%; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
  }
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>

И результат примера:

Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:

<style>
  P:first-line {
    font-style: bold; /* жирный текст */
    color: red; /* Красный цвет текста */
  }
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>

Результат:

 

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

Рассмотрим пример:

<style>
  P:after {
    content: ' webcodius.ru!';
    color:red;
  }
</style>
...
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком <strong>автомобиль</strong> это: <em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</p>

Смотрим результат:

Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after»  поставить «before», то текст вставиться в начале абзаца.

Псевдоклассы

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

При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:

<основной селектор><псевдокласс> { <стиль> }

Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.

Псевдоклассы условно делятся на три группы:

• определяющие состояние элементов;
• имеющие отношение к дереву элементов;
• указывающие язык текста.

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

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

Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a{...} и a:link{...} в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

Псевдокласс :visited определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.

Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style>
A:link {
color: blue; /* Цвет непосещенных ссылок */
}
A:visited {
color: green; /* Цвет посещенных ссылок */
}
A:hover {
color: yellow; /* Цвет ссылок при наведении на них курсора мыши */
}
A:active {
color: red; /* Цвет активных ссылок */
}
</style>
</head>
<body>
<p>
<a href="hover-active-.html">Ссылка 1</a> |
<a href="2.html">Ссылка 2</a> |
<a href="3.html">Ссылка 3</a> |
<a href="4.html">Ссылка 4</a>
</p>
</body>
</html>

И результат:

 Псевдоклассы структуры документа

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

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

<style>
li:first-child { font-weight: bold }
li:last-child { color: red }
</style>
...
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>

Результат примера:

В этом примере с помощью правила CSS «li:first-child» мы говорим браузеру, что стиль необходимо применить к элементу li, который идет первым в своем родительском элементе. А с помощью селектора «li:last-child» элемент должен быть последним. Таким образом, с помощью свойств css для настроек отображения шрифтов, мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.

Следующий псевдокласс :only-of-type, который применяется к дочернему элементу указанного типа, только если он единственный у своего родителя.

Например:

<style>
a:only-of-type{font-size: 200%}
</style>
...
<p><a href="1.html">ссылка 1</a></p>
<p><a href="2.html">ссылка 2</a>
<a href="3.html">ссылка 3</a></p>

Результат:

В примере псевдокласс : only-of-type применяется к элементу <a>, в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег <p>) встречаются только один раз.

Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

<основной селектор>:nth-child(odd | even | <число> | <выражение>) {стиль}

После имени данного псевдокласса в скобках может быть указано четыре возможных варианта:

• odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению <основной селектор>;
• even — означает все четные элементы;
• число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
• выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2...

Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:

<style>
tr:nth-child(2n)
{
  background: silver; /* Цвет фона */
}
</style>
...
<table border="1">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
  <tr>
    <td>Ячейка 7</td>
    <td>Ячейка 8</td>
    <td>Ячейка 9</td>
  </tr>
  <tr>
    <td>Ячейка 10</td>
    <td>Ячейка 11</td>
    <td>Ячейка 12</td>
  </tr>
  <tr>
    <td>Ячейка 13</td>
    <td>Ячейка 14</td>
    <td>Ячейка 15</td>
  </tr>
  <tr>
    <td>Ячейка 16</td>
    <td>Ячейка 17</td>
    <td>Ячейка 18</td>
  </tr>
</table>

Результат:

В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2... В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

Псевдоклассы :not и *

Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс :not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

<основной селектор>:not(<селектор выбора>) { <стиль> }

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

h1:not(#main){color:red;}

В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.

И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:

* { Описание правил стиля }

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

<style>
* {  font-size: 150%;  }
</style>

На этом все, до новых встреч на страницах блога!