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

Псевдоклассы CSS ориентированны на элементы в соответствии с их положением в дереве документа. На этой странице вы увидите примеры с использованием структурных псевдоклассов CSS3.

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

Список структурных псевдоклассов CSS3:

:root
:only-child
:empty
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child

Синтаксис

Синтаксис псевдоклассов используется с двоеточием : после двоеточия пишется название псевдокласса:

:pseudo-class {}

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

e:pseudo-class {}

Псевдокласс можно использовать вместе с id или class:

#id:pseudo-class {} .class:pseudo-class {}
к меню ↑

Числовые значения

Некоторые псевдоклассы CSS3 понимают нумерацию элементов в дереве документа. Указывать положение элемента в виде числового значения нужно в скобках (n).

:pseudo-class(n) {}

Значение (n) может быть целым числом, им указывается положение элемента в дереве документа.

В следующем коде стиль определяется только третьему элементу.

:pseudo-class(3) {}

Так же можно назначить порядок чисел, например для каждого пятого элемента.

:pseudo-class(5n) {}

Смещение порядка чисел путем добавления знаков + или -

:pseudo-class(5n+1) {}

Новые псевдоклассы понимают расположение элементов по порядку в дереве документа odd — четные и even — нечетные.

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

:pseudo-class(odd) {}
к меню ↑

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

Теперь когда вы увидели общий синтаксис посмотрим на примеры, что можно сделать с помощью псевдоклассов в HTML.

Демо

к меню ↑

Псевдокласс :root

Псевдокласс :root предназначен для корня HTML применяется раньше body.

Рассмотрим основную разметку страницы HTML5.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Знакомство с селекторами CSS3</title>
  </head>
<body>
// тело документа
</body>
</html>

Псевдоклассом :root можно залить фон цветом, чтобы выделить контейнер, не нужно будет делать новую разметку в теле HTML.

:root{
    background-color: rgb(56,41,48);
}
body {
    background-color: rgba(255, 255, 255, .9);
    margin: 0 auto;
    min-height: 350px;
    width: 700px;
}
Пример страницы с темным фоном присваивается элементу HTML корней и светлее цвет фона возложенных на теле элемента
Цвет фона страницы HTML залит с помощью псевдокласса :root
к меню ↑

Псевдокласс :only-child

Псевдокласс :only-child применяется к единственному дочернему элементу в корне. Его можно использовать для любого элемента в теле документа HTML.

e:only-child {}

Например, у вас есть блок с текстом в котором вы рекламируете новую книгу:

<h2> <b>Доступно по низкой цене!</b> Издание в мягкой обложке: Руководство по выживанию, если вокруг зомби: полная защита от живых мертвецов </h2>

Демо

Если нужно чтобы стиль для текста Доступно по низкой цене! был как выноска, нужно использовать псевдокласс :only-child для тега b, который является единственным дочерним элементом в корне тега h2.

Без использования id или class в элементах HTML
Псевдокласс :only-child для единственного дочернего элемента корне
h2 {
    background: rgb(255, 255, 255) url(zombies.png) no-repeat 97% 4%;
    border: 1px solid rgba(125, 104, 99, .3);
    border-radius: 10px;
    color: rgb(125,104,99);
    font: normal 20px Georgia, "Times New Roman", Times, serif;
    padding: 20px;
    position: relative;
    margin: 0 auto;
    width: 450px;
}
b:only-child {
    background-color: rgb(156,41,48);
    color: rgb(255,255,255);
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px;
	margin: 8px 0;
    text-align: center;
    text-transform: uppercase;
    -moz-transform: translate(-70px)
        rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);
    -moz-transform-origin: 50px 0;
    -webkit-transform: translate(-70px)
        rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);
    -webkit-transform-origin: 50px 0;
    -o-transform: translate(-70px)
       rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);
    -o-transform-origin: 50px 0;
    -ms-transform: translate(-70px)
        rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);
    -ms-transform-origin: 50px 0;
    transform: translate(-30px)
        rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);
    transform-origin: 50px 0 0;
    width: 150px;
}
к меню ↑

Псевдокласс :empty

Псевдокласс :empty применяется к пустым элементам не имеющее дочерние элементы.

<p></p>

Старайтесь не создавать ситуации, когда нужно использовать пустой элемент. С точки зрения синтаксиса, вы можете назначить стиль пустому элементу псевдоклассом :empty

:empty {
    background-color: red;
}

Или как в примере с псевдоклассом :only-child, можно добавить правило стиля для пустого элемент td:

td:empty {
    background-color: red;
}
к меню ↑

Псевдокласс :nth-child(n)

Псевдокласс :nth-child(n) применяется к позиции дочернего элемента.

Например, список комментариев выглядит красиво с разным цветом фона.

Примером список комментариев блога с переменным стилей
Комментарии с переменным цветом фона с применением псевдокласса :nth-child(n)

В HTML достаточно списка.

<ol>
  <li>
    <p>27 декабря, 2012 года</p>
    <a href="http://htmlhook.ru"><img src="images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
    <p><a href="http://htmlhook.ru">Жора</a></p>
    <p>Скоро на людей будет трудно охотится!</p>
  </li>
  <li>
    <p>28 декабря, 2012 года</p>
    <a href="http://htmlhook.ru"><img src="images/zombie-zluko.jpg" alt="Зомби по имени Злюко" /></a>
    <p><a href="http://htmlhook.ru">Злюко</a></p>
    <p>О, как я люблю свежую человеческую печень</p>
  </li>
  <li>
    <p>29 декабря, 2012 года</p>
    <a href="http://htmlhook.ru"><img src="images/zombie-gliba.jpg" alt="Зомби по имени Глыба" /></a>
    <p><a href="http://becameawalker.com">Глыба</a></p>
    <p>Ничего у них не получится, я бессмертный зомби.</p>
  </li>
</ol>

В CSS простой тип селектора.

li {
    background-color: rgba(194, 181, 158, .5);
    background-image: -webkit-gradient(linear,
        left top, left bottom,
        from(rgba(194, 181, 158, .7)),
        to(rgba(194, 181, 158, 0)));
    background-image: -moz-linear-gradient(top,
        rgba(194, 181, 158, .7),
        rgba(194, 181, 158, 0));
    background-image: -o-linear-gradient(
        rgba(194, 181, 158, .7),
        rgba(194, 181, 158, 0));
    border: 1px solid rgb(194, 181, 158);
    border-radius: 10px;
    margin: 15px 0;
    padding: 25px;
}

Псевдокласс :nth-child() для четных элементов списка.

li:nth-child(even){
    background-color: rgba(242, 224, 131, .5);
    background-image: -webkit-gradient(linear,
        left top, left bottom,
        from(rgba(242, 224, 131, .7)),
        to(rgba(242, 224, 131, 0)));
    background-image: -moz-linear-gradient(top,
        rgba(242, 224, 131, .7),
        rgba(242, 224, 131, 0));
    background-image: -o-linear-gradient(
        rgba(242, 224, 131, .7),
        rgba(242,224, 131, 0));
    border: 1px solid rgb(242, 224, 131);
}
к меню ↑

Псевдокласс :nth-last-child(n)

Псевдокласс :nth-last-child(n) работает точно так же как и :nth-child(n), но относится не к первому, а к последнему дочернему элементу.

Рассмотрите содержание списка.

<li>
    <p>29 декабря, 2012 года</p>
    <a href="http://htmlhook.ru"><img src="images/zombie-gliba.jpg" alt="Зомби по имени Глыба" /></a>
    <p><a href="http://becameawalker.com">Глыба</a></p>
    <p>Ничего у них не получится, я бессмертный зомби.</p>
</li>
Пример список комментариев блога с переменным стилей
Содержание списка комментариев имеет уникальный стиль

Для ссылок и ника комментируемого зомби, используется псевдокласс :nth-last-child(n) с числовым значением, присвоенного от второго до последнего элемента <p> в содержании списка комментариев.

p:nth-last-child(2) {
    clear: left;
    float: left;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
    width: 80px;
}
к меню ↑

Псевдокласс :first-of-type

Псевдокласс :first-of-type применяется к первому типу в корне.

Дата в комментариях — первый тип.

<li>
  <p>27 декабря, 2012 года</p>
  <a href="http://htmlhook.ru"><img src="images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
  <p><a href="http://htmlhook.ru">Жора</a></p>
  <p>Скоро на людей будет трудно охотится!</p>
</li>

Псевдокласс :first-of-type расположит первый параграф с правого края и добавит границу внизу.

p:first-of-type {
    border-bottom: 1px solid rgba(56,41,48, .5);
    float: right;
    font-weight: bold;
    padding-bottom: 3px;
    text-align: right;
    width: 560px;
}
к меню ↑

Псевдокласс :last-of-type

Псевдокласс :last-of-type применяется к последнему типу в корне.

<li>
  <p>27 декабря, 2012 года</p>
  <a href="http://htmlhook.ru"><img src="images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
  <p><a href="http://htmlhook.ru">Жора</a></p>
  <p>Скоро на людей будет трудно охотится!</p>
</li>

CSS для последнего абзаца в комментариях.

p:last-of-type {
    font-style: italic;
    margin: 50px 10px 10px 100px;
}
к меню ↑

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется к единственному в своем роде дочернему элементу.

<li>
  <p>27 декабря, 2012 года</p>
  <a href="http://htmlhook.ru"><img src="images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
  <p><a href="http://htmlhook.ru">Жора</a></p>
  <p>Скоро на людей будет трудно охотится!</p>
</li>

Так как аватар единственное изображение в содержании, для него применим псевдокласс :only-of-typ.

img:only-of-type{
    background-color: rgb(255, 255,255);
    border: 1px solid rgba(56,41,48, .5);
    float: left;
    padding: 3px;
}
к меню ↑

Псевдокласс :nth-of-type(n)

Псевдокласс :nth-of-type(n) работает так же как и другие псевдоклассы с числами. Но этот псевдокласс направлен на конкретной тип элемента в соответствии с его положением относительно корня.

Пример ниже расходная накладная.

Демо

Посмотреть корзину, которая показывает уникальные стили для различных ячеек таблицы
Псевдокласс :nth-of-type(n) для накладной
<table>
  <tbody>
    <tr>
      <th>Количество</th>
      <th>Наименование</th>
      <th>Цена</th>
    </tr>
    <tr>
      <td>1</td>
      <td>"Руководство по выживанию, если вокруг зомби: полная защита от живых мертвецов"</td>
      <td>$13.95</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Комплект "Апокалипсис"</td>
      <td>$349.00</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Бесшумный стрелковый комплекс ВСС "Винторез"</td>
      <td>$189.95</td>
    </tr>
    <tr>
      <td>1</td>
      <td>40" Самурайский меч "YAKUZA"</td>
      <td>$159.00</td>
    </tr>
    <tr>
      <td colspan="2">Итого</td>
      <td>$711.19</td>
    </tr>
    <tr>
      <td colspan="2">Налог (7%)</td>
      <td>$49.78</td>
    </tr>
    <tr>
      <td colspan="2">Доставка</td>
      <td>$25.00</td>
    </tr>
    <tr>
      <td colspan="2">Всего</td>
      <td>$785.97</td>
    </tr>
  </tbody>
</table>

Придадим вид таблице:

table, td, th, tr {
    border: 1px solid rgba(125, 104, 99, .3);
}

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

<tr>
  <th>Количество</th>
  <th>Наименование</th>
  <th>Цена</th>
</tr>

CSS

th:nth-of-type(2) {
    text-align: center;
}

Псевдоклассом :nth-of-type(n) можно применить правила стиля для оставшихся элементов таблицы, без единого класса или идентификатора.

th:nth-of-type(3), td:nth-of-type(3) {
    text-align: right;
}
th:nth-of-type(1), td:nth-of-type(1) {
    text-align: center;
}
к меню ↑

Псевдокласс :nth-last-of-type(n)

Псевдокласс :nth-last-of-type(n) работает точно так же как и :nth-of-type(n), но относительная позиция смещена не от первого, а от последнего дочернего элемента.

В примере ячейки с текстом: Итого, Всего, Налог, Доставка, Всего с уникальным стилем.

Уникальные стили для результатов
Добавить стиль псевдоклассом :nth-of-type(n) для результатов накладной

Ячейка tr Итого, в таблице четвертая снизу.

<tr>
  <td colspan="2">Итого</td>
  <td>$711.19</td>
</tr>

Чтобы добавить ячейке стиль, применим псевдокласс :nth-last-of-type(n)

tr:nth-last-of-type(4) td {
    border-top: 1px solid rgb(56,41,48);
    font-style: italic;
    font-weight: bold;
    text-align: right;
}

Для остальных трёх ячеек таблицы.

tr:nth-last-of-type(1) td {
    background-color: rgb(56,41,48);
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    padding: 5px 10px;
    text-align:right;
}
tr:nth-last-of-type(2) td, tr:nth-last-of-type(3) td {
    font-style: italic; text-align: right;
}
к меню ↑

Псевдокласс :first-child

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

Рассмотрим боковую колонку с несколькими элементами.

Демо

Боковая панель с различными разделами содержания
Боковая панель с различным содержанием

Для примера используется разметка div с вложенными элементами HTML5 aside.

<div role="complementary">
  <aside>
    <ul>
      <li><a href="#">Подписаться на наш канал на YouTube</a></li>
      <li><a href="#">Следуйте за нами на Twitter</a></li>
      <li><a href="#">Поделится на Facebook</a></li>
    </ul>
  </aside>
  <aside>
    <h3>Подписка на рассылку</h3>
      <p>Гуру против пожирателей плоти, постоянный поиск борьбы с вирусом. part 1</p>
      <p><a href="#">Подписаться сейчас</a></p>
  </aside>
  <aside>
    <h3>Популярное на Блоге</h3>
      <p>Заря. День новый идет.
      Никто не знает что он с собою несет...
      Пеплом и дымом все небо затмит.
      И тот свет мертвыми будет забит.
      Начнут тогда из могил вылезать,
      Убийц своих будут искать.
      Огонь из земли, огонь и с небес,
      Из каждого тела вырвится бес.
      И у всех людей разум затмится
      И будут они все в ярости биться...</p>
      <p><a href="#">Читать далее → </a></p>
  </aside>
</div>

Боковая колонка содержит разделы, обведённые границей и тенью:

aside {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(125, 104, 99, .5);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 25px;
    
    -webkit-box-shadow: inset 0 0 20px rgba(125, 104, 99, .5);
       -moz-box-shadow: inset 0 0 20px rgba(125, 104, 99, .5);
            box-shadow: inset 0 0 20px rgba(125, 104, 99, .5);
}

Первая строка содержит иконки социальных сетей, и не имеет границу и фон. К этой строке применим псевдокласс :first-child, для того чтобы добавить стиль первому элементу aside в корне div.

aside:first-child {
    background-color: transparent;
    border: 0;
    padding: 0;
    height: 60px;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
к меню ↑

Псевдокласс :last-child

Псевдокласс :last-child применяется для последнего элемента в корне. В боковой панели первый раздел содержит список социальных сетей.

<ul>
  <li><a href="#">Подписаться на наш канал на YouTube</a></li>
  <li><a href="#">Следуйте за нами на Twitter</a></li>
  <li><a href="#">Поделится на Facebook</a></li>
</ul>

Значки социальной сети в списке сделаны спрайтом.

li a {
    background: url(images/sprite.png) no-repeat 0 0;
    display:block;
    height: 52px;
    text-indent: -5000px;
    width: 52px;
    float: left; 
}

Стиль последнему звену в списке добавит псевдокласс :last-child.

li:last-child a {
    background-position: -102px 0;
}

Остальные значки с ссылками определены псевдоклассом :nth-child.

li:nth-child(2) a {
    background-position: -50px 0;
}
к меню ↑

Поддержка браузерами

Все последние версии браузеров включая Internet Explorer 9/10/11 поддерживают структурные псевдоклассы CSS3. Единственное что некоторые старые версии браузеров неправильно могут понять их. Что касается более новых версий Internet Explorer, структурные псевдоклассы CSS3 без сомнений можно использовать в своём проекте.

Поддержка структурных псевдоклассов CSS
IE Edge Chrome Opera Safari Firefox Android iOS
9+ 12+

Если вам нужно чтобы структурные псевдоклассы CSS3 работали в старых версиях Internet Explorer, подключите утилиту Selectivzr, которая эмулирует псевдоклассы CSS3 в Internet Explorer. Утилита Selectivzr не конфликтует с jQuery, Dojo, MooTools и Prototype.