Псевдоклассы css3 – Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

Leave a Comment / Css / By /

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

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

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

  1. названия псевдоклассов нам не нужно самим придумывать, их надо просто знать.
  2. имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега HTML разметки.

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


:hover – при наведении курсора
:link – не посещенная ссылка
:active – состояние при нажатой ссылке
:visited — посещенная ссылка

Идея состоит в том, что для каждого состояния ссылки, задаются свои CSS стили. Например, изменим цвет ссылки при наведении курсора, на красный.

a:hover {
    color: red;
}

Чаще всего верстальщики сталкиваются с псевдоклассами работающими с ссылками, потому и знают их лучше всех.

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

Однако больше всего псевдоклассов используется для работы с элементами формы, особенно для input.

:focus – меняет стиль для поля, получившего фокус (клик внутри поля).

По умолчанию браузер делает обводку внутри инпута, попадающего в фокус. Мы отменяем дефолтную обводку и устанавливаем свои стили.

input:focus {
    outline: none;
    border: 2px solid green;
}

:checked – применяется к checkbox и radio элементам формы, когда они находятся во включенном состоянии.

:empty – представляет пустой элемент, например <span></span>

span:empty {
    background: blue;
    width: 30px;

    height: 30px;
    display: block;
}

:invalid – применяется к полям формы, когда вводимые пользователем данные не подходят под заданный тип (невалидные данные).

Например, в поле с типом данных tel, пользователь ввел имя и тогда это поле станет красным.

<input type="tel" required>

input:invalid {
    background: red;
}


:valid – если валидация была успешна, то цвет поля станет зеленым.

input:valid {
    background: green;
}

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


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

<ul>
    <li>child 1</li>
    <li>child 2</li>
    <li>child 3</li>
    <li>child 4</li>

    <li>child 5</li>
</ul>

li:first-child {
    background: grey;
}

У первого элемента списка появился серый фон.

:last-child – задает CSS стили последнему дочернему элементу в группе элементов одного родителя.

li:last-child {
    background: orange;
}

У последнего элемента списка появился оранжевый фон.

Псевдокласс nth-child

Для примера возьмем все тот же список. Как быть, если нужно выбрать не первый и не последний элемент списка, а например второй? Так вот, псевдокласс nth-child позволяет обращаться к элементу через порядковый номер, расположения в HTML-разметке или через выражение.

Выбор через порядковый номер, начиная с 1-го.

// второй элемент белый
li:nth-child(2) {
    color: #fff;
}

// третий элемент черный

li:nth-child(3) {
    color: #000;
}

Через ключевые слова:
:even – выбирает все четные номера
:odd – выбирает все нечетные номера

.li:nth-child(even) {
    background: white;
}

li:nth-child(odd) {
    background: blue;
}

Через выражение:

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

:nth-child(3n) // каждый третий элемент (3, 6, 9)
:nth-child(3n+4) // каждый третий элемент, начиная с четвертого (4, 7, 10)

Специфичные псевдоклассы


target: — применяется к id, который указан в адресной строке браузера.

<div>Заголовок раздела</div>

h2:target {
    color: red;
    font-weight: 500;

}

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

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

При наведении курсора на последний дочерний элемент списка, сделаем текст зеленым.

li:last-child:hover{
    color:green;
}

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

  • Как использовать псевдоклассы в CSS Создано 04.10.2019 10:35:19
  • Как использовать псевдоклассы в CSS
    Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Псевдоклассы в CSS | Учебные курсы

Мы видели в основном три типа селекторов CSS:

  • обычные, где р в CSS нацеливается на HTML-элементы <p>;
  • классы, где .intro в CSS нацеливается на элементы с атрибутом;
  • идентификаторы, где #logo в CSS нацеливается на элемент с атрибутом.

Ко всем этим селекторам могут прикрепляться псевдоклассы. Псевдокласс:

  • определяет конкретное состояние элемента;
  • это ключевое слово, которое начинается с двоеточия.

Синтаксис

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого

селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }

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

:hover

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

HTML

<p>Наведите курсор <a href="#">на эту ссылку</a> и увидите, как она становится красной.</p>

CSS

a { color: blue; }
a:hover { color: red; }

Первая строка в CSS определяет, что все элементы <a> должны выглядеть синими. Вторая строка определяет, что при наведении указателя мыши <a> должны выглядеть красными.

Вторая строка ориентирована на те же элементы HTML, но только, когда происходит что-то конкретное (в данном случае, наведение).

:visited

Этот псевдокласс нацеливается на ссылки, которые уже были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Результаты Google работают так же.

HTML

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="http://marksheet.io/visited.html">MarkSheet</a>

CSS

a { color: dodgerblue; }
a:visited { color: rebeccapurple; }

Менять цвет посещённых ссылок часто забывают, но пользователям так удобнее просматривать список результатов. Это помогает им легко определять, где они уже были.

:focus

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

.form-input { border: 2px solid grey; padding: 5px; }
.form-input:focus { background: lightyellow; border-color: blue; outline: none; }

Правило outline: none удаляет свечение вокруг поля.

:first-child и :last-child

Эти псевдоклассы связаны с иерархией в HTML. Они нацеливаются на элементы HTML в зависимости от порядка, в котором они появляются в коде.

HTML

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
</ul>

CSS

li:first-child { background: greenyellow; }
li:last-child { background: lightsalmon; }

Как вы можете видеть, ни один стилевой класс не применяется к первому и последнему <li>. Их

положение в иерархии определяется с помощью правил CSS.

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

:nth-child

Данный псевдокласс является глобальной версией :first-child и :last-child. С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2).

li:nth-child(2) { background: violet; }

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

  • :nth-child(odd) нацелится на каждый нечётный элемент;
  • :nth-child(even) нацелится на каждый чётный элемент.
li:nth-child(odd) { background: gold; }

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на

расчётах с помощью ключевого слова n.

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

li:nth-child(3n) { background: hotpink; }

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

  • 3 умножить на 0 равен нулю;
  • 3 умножить на 1 — третий пункт;
  • 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

li:nth-child(3n+1) { background: limegreen; }

3n + 1 состоит из двух частей:

  • 3n выбирает каждый третий пункт;
  • +1 смещает начало на 1.

Вот как были выполнены вычисления:

  • 3 умножить на 0 плюс 1 равно 1;
  • 3 умножить на 1 плюс 1 равно 4;
  • 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.

Другие псевдоклассы

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

Перейти к заданиям

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

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

Последнее обновление: 21.04.2016

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

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

  • :root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>

  • :link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход

  • :visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил

  • :active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход

  • :hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться и к другим элементам, например, к параграфам

  • :focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)

  • :not: позволяет исключить элементы из списка элементов, к которым применяется стиль

  • :lang: стилизует элементы на основании значения атрибута lang

  • :empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            a:link    {color:blue; text-decoration:none}
            a:visited {color:pink; text-decoration:none}
            a:hover   {color:red; text-decoration:underline}
            a:active  {color:yellow; text-decoration:underline}
			input:hover {border:2px solid red;}
        </style>
    </head>
    <body>
        <a href="index.html">Учебник по CSS3</a>
		<input type="text" />
    </body>
</html>

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:not(.blueLink) { color: red; }
        </style>
    </head>
    <body>
		<a>Первая ссылка</a><br/>
		<a>Вторая ссылка</a><br/>
		<a>Третья ссылка</a>
    </body>
</html>

Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс «blueLink». В скобки псевдоклассу not передается селектор элементов, которые надо исключить.

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

Селектор :lang выбирает элементы на основании атрибута lang:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :lang(ru) {
				color: red;
			}
        </style>
    </head>
    <body>
		<form>
			<p lang="ru-RU">Я изучаю CSS3</p>
			<p lang="en-US">I study CSS3</p>
            <p lang="de-DE">Ich lerne CSS3</p>
        </form>
    </body>
</html>

CSS3 | Новые псевдоклассы

333 91

Веб-программирование — CSS3 — Новые псевдоклассы

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

Для начала рассмотрим простой пример таблицы, на которой и будем испытывать новые псевдоклассы:

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

Ниже приведен код таблицы и ее базовое стилевое оформление:

<table>
  <tr>
    <th>Продукт</th> 
    <th>Цена</th> 
    <th>Количество</th> 
    <th>Общая стоимость</th> 
  </tr> 
  <tr>
    <td>Кофе</td>
    <td>30</td> 
    <td>5</td> 
    <td>150</td> 
  </tr> 
  <tr>
    <td>Рубашка</td>
    <td>400</td>
    <td>2</td> 
    <td>800</td> 
  </tr>
  <tr>
    <td>Красный степлер</td>
    <td>50</td>
    <td>4</td> 
    <td>200</td> 
  </tr>
  <tr>
    <td colspan="3">Общая стоимость</td> 
    <td>1150</td> 
  </tr> 
  <tr>
    <td colspan="3">Доставка</td> 
    <td>120</td> 
  </tr> 
  <tr>
    <td colspan="3">Итого</td> 
    <td>1270</td> 
  </tr> 
</table>
table {
   width: 600px;
   border-collapse: collapse;
}

th, td {
   border: none;
}

th {
   background-color: #000; 
   color: #fff;
}

Чередование цвета строк (:nth-of-type)

Каждый из нас неоднократно видел таблицы с чередованием цвета строк (эффект зебры): этот эффект полезен тем, что упрощает просмотр данных по строкам. Стилевое оформление такого рода лучше всего выполняется средствами уровня представления, то есть CSS. Традиционно задача решалась включением в строки таблицы дополнительных имен классов (например, odd и even для нечетных и четных строк соответственно).

Однако подобное загрязнение разметки таблицы нежелательно, поскольку спецификация HTML5 рекомендует избегать использования имен классов для определения представления. При помощи новых селекторов мы сможем добиться желаемого эффекта без изменения разметки — таким образом, представление будет отделено от контента.

Селектор nth-of-type находит каждый n-й элемент конкретного типа, определяемый формулой или ключевыми словами. Формулы будут более подробно рассмотрены позднее, а пока разберемся с ключевыми словами, потому что их проще понять.

Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все четные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций:

tr:nth-of-type(even) {
	background-color: #DCC;
}

tr:nth-of-type(odd) {
	background-color: #F3F3F3;
}

Фактически этот селектор означает: «Найти каждую четную строку таблицы и задать ее цвет. Затем найти каждую нечетную строку таблицы и задать ее цвет. Так «зебровая» окраска таблицы реализуется без использования сценарного кода или дополнительных имен классов в строках.

Очередная версия стилевого оформления таблицы выглядит так:

Выравнивание текста столбцов (:nth-child)

По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого — чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child, но сначала необходимо узнать, как он работает.

Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an+b, где а — множитель, a b — смещение. Принцип использования формул проще понять на примере. Давайте применим его к контексту таблицы. Для выбора всех строк таблицы можно воспользоваться селектором вида:

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

А для выбора каждой второй строки таблицы используется множитель 2n:

Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начал

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

Определяет стиль активного элемента.

Представляет пустые элементы, т. е. те, которые не содержат дочерних элементов или текста.

Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено».

Применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.

Применяет стиль к заблокированным элементам форм.

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

Используется для применения стиля к доступным (не заблокированным) элементам форм.

Задаёт стилевое оформление для первого дочернего элемента в группе братских элементов.

Задаёт правила стилей для первого элемента определённого типа в группе братских элементов.

Определяет стиль для элемента, получающего фокус.

Определяет стиль элемента, когда он сам или элементы внутри него получают фокус.

Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме.

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент ещё не активирован.

Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

Задаёт стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределённом состоянии.

Применяется к полям формы, содержимое которых не соответствует указанному типу.

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

Задаёт стилевое оформление последнего дочернего элемента в группе братских элементов.

Задаёт правила стилей для последнего элемента определённого типа в группе братских элементов.

Применяется к ссылкам, которые ещё не посещались пользователем.

Задаёт правила стилей для элементов, которые не содержат указанный селектор.

Используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Используется для добавления стиля к элементам на основе нумерации в дереве элементов, отсчёт ведётся с конца.

Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов, отсчёт ведётся от последнего элемента.

Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.

Применяется к дочернему элементу, только если он является единственным у своего родителя.

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

Применяет стилевые правила к полю формы, у которого не задан атрибут required.

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

Определяет стиль элемента &lt;input&gt; или &lt;textarea&gt;, который в данный момент отображает текст подсказки, заданной атрибутом placeholder.

Применяется к полям формы, у которых задан атрибут readonly.

Применяется к полям формы, доступных для изменения.

Применяет стилевые правила к элементу input, у которого установлен атрибут required.

Применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.

Применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

CSS3 | Псевдоклассы дочерних элементов

Псевдоклассы дочерних элементов

Последнее обновление: 21.04.2016

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

  • :first-child: представляет элемент, который является первым дочерним элементом

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

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

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

Используем псевдокласс first-child для выбора первых ссылок в блоках:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:first-child{
			
				color: red;
			}
        </style>
    </head>
    <body>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
		</div>
		<h4>Смартфоны</h4>
		<div>
			<p>Топ-смартфоны 2016</p>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
    </body>
</html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

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

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

Используем псевдокласс last-child:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:last-child{
			
				color: blue;
			}
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<div>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
			<p>Данные за 2016</p>
		</div>
    </body>
</html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		p:only-child{
			color:red;
		}
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст1</p>
		</div>
		<div>
			<p>Текст2</p>
			<p>Текст3</p>
		</div>
		<div>
			<p>Текст4</p>
		</div>
	</body>
</html>

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

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

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		span:only-of-type{
		
			color: green;	/* зеленый цвет */
		}
		p:only-of-type{
		
			color: red;	/* красный цвет */
		}
		div:only-of-type{
		
			color: blue;	/* синий цвет */
		}
        </style>
    </head>
    <body>
		<div>
			Header
		</div>
		<p>Единственный параграф и <span>элемент спан</span></p>
		<div>
			Footer
		</div>
	</body>
</html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			tr:nth-child(odd) { background-color: #bbb; }
			tr:nth-child(even) { background-color: #fff; }
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<table>
			<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
			<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
			<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
			<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
			<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
			<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
			<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
			<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
		</table>
    </body>
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

tr:nth-child(2n+1) { background-color: #bbb; }

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

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

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

tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:


tr:nth-last-child(2) { 
	background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
}
tr:nth-last-child(2n+1) {  
	background-color: #eee; /* нечетные строки, начиная с конца  */
}

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

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


tr:nth-of-type(2) { 
	background-color: #bbb;
}

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:


tr:nth-last-of-type(2n) { 
	background-color: #bbb;
}

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

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

images

Как правило, все стили CSS, которые мы привыкли использовать, применяются для элементов, которые можно обнаружить в дереве (структуре) документа. С ними все понятно их можно увидеть в исходном коде документа и с ними можно взаимодействовать.

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

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

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

Как получить доступ к таким элементам на странице?

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

Что это такое?

Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях.

Псевдоэлементы – это селекторы, которые определяют область элементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS.

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

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

Для составления этого списка использовались материалы этой страницы страндарта:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

http://www.w3.org/TR/CSS/#indices

В разделе 4.2. Selector Index приводится официальная таблица.

Итак, список псевдоклассов:

E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:link
E:visited
E:active
E:hover
E:focus
E:target
E:lang(fr)
E:enabled
E:disabled
E:checked
E:not(s)

Псевдоэлементов намного меньше, вот их список:

E::first-line
E::first-letter
E::before
E::after

Здесь, E-  элемент, к которому применяется селектор.

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

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