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

Все разработчики веб-приложений должны знать как писать CSS, и писать его эффективно. Если, у вас есть огромный сайт предприятия и вам нужен CSS, оптимизированный по скорости. Или если вы работаете в старой системе, которая ограничивает доступ к HTML, это означает, что вам необходимы селекторы, стиль элементов без идентификаторов id и классов class .
Тема селекторы CSS3 большая, и состоит из многих частей, начинается со структурных псевдоклассов . Слово Селекторы происходит от английского слова select , что означает, сделать выбор. Смотрите примеры, CSS селекторы .

Что такое псевдоклассы?

CSS псевдоклассы — это элементы CSS, и не предназначены для комбинирования заданий таких как id и class или простых селекторов. Вы можете использовать псевдоклассы для выбора элементов на основе их атрибутов, состояния и относительное положение в документе. Многие уже знакомы с псевдоклассами ссылок из CSS2.1:



:link
:visited
:hover
:active
:focus


CSS3 вводит ряд новых псевдоклассов, в том числе структурные псевдоклассы, ориентированные для элементов в соответствии с их положением в дереве документа и связь с другими элементами. Вот список структуры псевдоклассов, и вы увидите в этой статье примеры с использованием псевдоклассов 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

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



:pseudo-class(n) {}


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



:pseudo-class(3) {}


Так же можно назначить порядок чисел, например, каждый пятый элемент , для этого нужно указать значение (5n) :



:pseudo-class(5n) {}


Кроме того, вы можете назначить смещение порядка чисел (отрицательные значения тоже разрешены, значение по умолчанию равно нулю) путем добавления + или вычитания - значение смещения:



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


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



:pseudo-class(odd) {}


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

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

Демо

:root

:root — этот псевдокласс предназначен для корня HTML (он применяется раньше body ). Рассмотрим основную разметку страницы HTML5:



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

<body>
</body>
</html>


Если вы хотите залить цвет фона на этой странице, в сочетании с другим цветом, чтобы был виден «container», вы можете сделать это с помощью CSS. И тогда вам не нужно будет делать новую разметку в файле HTML:



:root{
    background-color: rgb(56,41,48);
}
body {
    background-color: rgba(255, 255, 255, .9);
    margin: 0 auto;
    min-height: 350px;
    width: 700px;
}


В этом примере, цвет фона страницы залит с помощью :root и прикладные стили для контейнера с помощью селектора для фона. Результат показан ниже.

Пример страницы с темным фоном присваивается элементу HTML корней и светлее цвет фона возложенных на теле элемента
Цвет фона страницы HTML залит с помощью :root
:only-child

:only-child — псевдокласс, который является единственный дочерний в корне. Можно использовать :only-child для любого элемента страницы HTML, добавляя в псевдокласс синтаксис элементов e , например:



e:only-child {}


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

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

Демо

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



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;
}


В этом коде CSS, не используются id или class в элементах HTML

Без использования id или class в элементах HTML
Без id или class в элементах HTML
:empty

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



:empty {
    background-color: red;
}


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



td:empty {
    background-color: red;
}


:nth-child(n)

:nth-child(n) -этот псевдокласс присвоен дочерний элементу по отношению к его позиции внутри корневого элемента. Например список комментарии в блогах, может выглядеть красиво с разным цветом фона.

Примером список комментариев блога с переменным стилей
Комментарии с переменным цветом фона.

Для этого примера HTML достаточно списка:



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


Для этого стиля разметки, первые назначены элементы списка с простым типом селектора, как показано ниже:



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


Каждый из пункта списка, из которых состоит комментарии должны быть с уникальным стилем, так же как и изображение.

Пример список комментариев блога с переменным стилей
Пример, список комментариев блога с переменным стилем

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



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://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua"><img src=
http://www.pixelcom.crimea.ua/"images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
        <p><a href=
http://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Жора</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://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua"><img src=
http://www.pixelcom.crimea.ua/"images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
        <p><a href=
http://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Жора</a></p>
        <p>Скоро на людей будет трудно охотится!</p>
</li>


Смотрите, как применить :last-of-type для стиля к последнему пункту:



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://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua"><img src=
http://www.pixelcom.crimea.ua/"images/zombies-jora.jpg" alt="Зомби по имени Жора" /></a>
     <p><a href=
http://www.pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Жора</a></p>
     <p>Скоро на людей будет трудно охотится!</p>
 </li>


CSS:



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) в корзине

Вот разметка HTML для этой корзины в таблице.



<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, 
table td, 
table th, 
table tr {
    border: 1px solid rgba(125, 104, 99, .3);
}


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



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


Селектором :nth-of-type(n) , можно разместить конкретный дочерний элемент:



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


Можно использовать те же псевдоклассы как стиль для оставшихся элементов, без единого класса или id :



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) , но относительная позиция смещена от последнего дочерний, а не от первого. В примере корзины, Итого, Всего, Налог, Доставка, Всего с уникальными стилями.

Уникальные стили для результатов
Уникальные стили для результатов

Давайте посмотрим на Итого , он является четвертым подряд tr снизу в верх, в таблице:



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


Я использовал :nth-last-of-type(n) , чтобы дать этому ряду ячеек стиль как показано на рисунке. Для этого использован CSS:



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 , с вложенными элементами aside .



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


На примере видно, что боковая панель содержит разделы, содержание которых определены границы и фон:



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


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



aside:first-child {
    background-color: transparent;
    border: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
	 height: 60px;
}


:last-child

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



<ul>
	<li><a href=
http://www.pixelcom.crimea.ua/"http://youtube.com/whenzombiesattack">Подписаться на наш канал на YouTube</a></li>
	<li><a href=
http://www.pixelcom.crimea.ua/"http://twitter.com/whenzombiesattack">Следуйте за нами на Twitter</a></li>
	<li><a href=
http://www.pixelcom.crimea.ua/"http://facebook.com/whenzombiesattack">Поделится на 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. Некоторые старые версии браузера могут неправильно понять некоторые селекторы CSS3 которые описаны в этой статье.

Что касается более новых версиях Internet Explorer, вы должны использовать эти псевдоклассы в вашем проекте без сомнений.

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

Обработка

Если производительность и скорость являются важным для вашего проекта, вы должны использовать псевдоклассы рационально. Я рекомендую воспользоваться некоторыми инструментами тестирования, чтобы помочь вам лучше оптимизировать ваши селекторы CSS. Например такими:

Когда использовать псевдокласс

Какие селекторы использовать, зависит от вашего проекта. Не все псевдоклассы CSS3 показанные в этой статье могут подойти для вашей таблицы стилей, но они могут быть бесценным инструментом, особенно в тех случаях, когда вы не можете применять id и class . Помните, что написание хорошего CSS, всегда приносит положительный результат, вашему проекту.

Заключение

Смотрите как применить псевдоэлементы такие как :targe и negation на странице.

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://www.pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>