Содержание

Псевдоклассы — CSS | MDN

Fullscreen API Живой стандарт Определён :fullscreen.
HTML Living Standard Живой стандарт Нет изменений от HTML5.
Selectors Level 4 Рабочий черновик Определены :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() и :matches().
Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматрия семантическое значение).
HTML5 Рекомендация Определено семантическое значение в HTML контексте для 
:link
, :visited, :active, :enabled, :disabled, :checked и :indeterminate.
Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write и :dir().
CSS Basic User Interface Module Level 3 Рекомендация Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only
 и :read-write, но без связанного семантического значения.
Selectors Level 3 Рекомендация Определены :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty и :not().
Определён синтаксис для :enabled, :disabled, :checked и :indeterminate, но без связанного семантического значения.
Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) Рекомендация Определены :lang(), :first-child, :hover и :focus.
Нет значительных изменений для псевдоклассов, определённых в CSS Level 1.
CSS Level 1 Рекомендация Определены :link, :visited и :active, но без связанного семантического значения.

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

Псевдоклассы форм

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

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

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
				border: 2px black solid;
				color: red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>

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

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
				color: red;
				font-weight: bold; 	/* выделение жирным */
			}
        </style>
    </head>
    <body>
			<h3>Выберите технологию</h3>
			<p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
			
			<h3>Укажите пол</h3>
			<p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

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

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
				border: 2px solid red;
			}
			input:valid {
				border: 2px solid green;
			}
        </style>
    </head>
    <body>
		<form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в определенный диапазон. Это в первую очередь относится к элементу

<input type="number" >.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
				border: 2px solid green;
			}
			:out-of-range {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <p>
				<label for="age">Ваш возраст:</label> 
				<input type="number" min="1" max="100" value="10" name="age"/>
			</p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
				border: 2px solid blue;
			}
			:required {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
			<p>
				<label for="login">Логин:</label> 
				<input type="text" name="login" required />
			</p>
			<p>
				<label for="password">Пароль:</label> 
				<input type="password" name="password" required />
			</p>
            <p>
				<label for="name">Имя:</label> 
				<input type="text" name="name"/>
			</p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>

Псевдоклассы в CSS — обзор для начинающих

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

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

selector:pseudo-class {property: value}

Классы CSS также могут использоваться с псевдоклассами:

selector.class:pseudo-class {property: value}

Наиболее часто используемые CSS псевдоклассы:

ЗначениеОписание
:linkКласс открывавшейся ранее ссылки.
:visitedКласс открытой ранее ссылки.
:hoverКласс элемента, когда на него наведен курсор мыши.
:activeКласс для активного элемента.
:focusКласс для элемента, который находится в фокусе.
:first-childКласс элемента, который является дочерним элементом другого.
:langКласс, чтобы указать язык, применяемый для конкретного элемента.

При определении псевдоклассов CSS3 в блоке <style>…</style> следует помнить:

  • a:hover должен располагаться после a:link и a:visited, иначе он не будет работать;
  • a:active должен располагаться после a:hover, иначе он не будет работать;
  • Имена псевдоклассов не чувствительны к регистру;
  • Псевдоклассы отличаются от классов CSS, но они могут быть объединены.

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

<html>
   <head>
      <style type="text/css">
         a:link {color:#000000}
      </style>
   </head>
   <body>
      <a href="">Черная ссылка</a>
   </body>
</html>

Этот код создает следующую черную ссылку:

Ниже приведен пример того, как использовать псевдокласс HTML :visited, чтобы задать цвет открытой ранее ссылки. Возможные значения — цвет в любом допустимом формате:

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href="">Нажмите эту ссылку</a>
   </body>
</html>

Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:

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

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="">Наведите мышь на эту ссылку</a>
   </body>
</html>

Этот код создает следующую ссылку. Теперь наведите курсор мыши на эту ссылку, и вы увидите, что она поменяет свой цвет на желтый:

В следующем примере показано, как использовать класс :active, чтобы изменить цвет активной ссылки. Можно использовать значение цвета в любом допустимом формате:

<html>
   <head>
      <style type="text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href="">Нажмите на эту ссылку</a>
   </body>
</html>

Этот код создает следующую ссылку. Когда пользователь нажимает на нее, цвет меняется на розовый:

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

<html>
   <head>
      <style type="text/css">
         a:focus {color: #0000FF}
      </style>
   </head>
   <body>
      <a href="">Нажмите на эту ссылку </a>
   </body>
</html>

Этот код создает следующую ссылку. Когда эта ссылка находится в фокусе ввода, ее цвет меняется на оранжевый. Цвет возвращается обратно, когда ссылка находится вне фокуса:

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

Чтобы :first-child работал в IE <!DOCTYPE> должен объявляться в верхней части документа.

Например, для создания отступа для первого абзаца всех элементов <div>, нужно использовать следующее определение:

<html>
   <head>

      <style type="text/css">
         div > p:first-child
         {
            text-indent: 25px;
         }
      </style>

   </head>
   <body>

      <div>
         <p>Первый параграф блока div. Этот параграф будет иметь отступ</p>
         <p>Второй параграф блока div. Этот параграф не будет иметь отступа</p>
      </div>
      <p>Однако этот стиль задается только для параграфов</p>

      <div>
         <h4>Заголовок</h4>
         <p>Первый параграф в блоке div. Этот параграф не будет иметь отступа.</p>
      </div>

   </body>
</html>

Этот код дает следующий результат:

Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.

Этот класс полезен при создании документов, которые должны содержать текст на нескольких языках, имеющих различные конвенции для некоторых языковых конструкций. Например, во французском языке для обозначения цитаты, как правило, используются угловые скобки (<and>), в то время как в английском языке используются одинарные кавычки (‘and‘).

В таком документе вы можете использовать псевдокласс :lang, чтобы изменить кавычки надлежащим образом. Приведенный ниже код изменяет тег <blockquote> надлежащим образом для каждого языка:

<html>
   <head>
      <style type="text/css">
         /* Два уровня кавычек для двух языков*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   <body>
      <p>...<q lang="fr">Кавычки в абзаце</q>...</p>
   </body>
</html>

Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes, так что для большинства элементов эффект будет незаметен.

Этот код дает следующий результат:

Данная публикация является переводом статьи «CSS — Pseudo Classes» , подготовленная редакцией проекта.

Как использовать псевдоклассы в 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;
}

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

  • Создано 04.10.2019 10:35:19
  • Михаил Русаков

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

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

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

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

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

Псевдоклассы | w3.org.ua

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

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

  • стили для элемента, когда на него наведена мышь;
  • стили для гиперссылок.

Также, можно сказать, что псевдоклассы, это классы которые описаны в CSS, но не присутствуют в HTML коде, хотя и влияют на оформление элементов. Применение псевдоклассов позволяет расширить возможности оформления элементов на странице.

Пример использования

селектор:псевдокласс { свойство: значение; }

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

  свойство: значение;

}  

Обратите внимание, что селектор:псевдокласс пишутся слитно! Без пробелов!

Псевдоклассы для оформления гиперссылок

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

  • :link — псевдокласс описывающий обычное отображение гиперссылки;
  • :visited — посещенная гиперссылка, часто отображают серым цветом, последнее время наметилась тенденция не оформлять посещенные гиперссылки;
  • :hover — состояние ссылки, когда на нее наведен курсор мыши. Псевдокласс hover можно применять и на других элементах;
  • :active — состояние ссылки в момент клика мышью. Данный класс можно применять и на других элементах, чтобы обозначить клик мышью. Например на кнопках.

Применение псевдоклассов для оформления ссылок:

/* непосещенная ссылка*/ a:link { color: #FF0000; } /* посещенная ссылка */ a:visited { color: #00FF00; } /* наведение мыши на ссылку */ a:hover { color: #FF00FF; } /* клик по ссылки */ a:active { color: #0000FF; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/* непосещенная ссылка*/

a:link {

  color: #FF0000;

}

 

/* посещенная ссылка */

a:visited {

  color: #00FF00;

}

 

/* наведение мыши на ссылку */

a:hover {

  color: #FF00FF;

}

 

/* клик по ссылки */

a:active {

  color: #0000FF;

}

Обратите внимание, что псевдокласс :hover должен следовать после описания :link и :visited, для правильного срабатывания приоритета. Также, псевдокласс :active должен располагаться ниже класса :hover.

Псевдоклассы не являются регистрозависимыми.

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

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

Выше мы описывали применение псевдоклассов к тегам HTML. Однако, можно определить псевдоклассы и CSS классам, в таком случае описание выглядит следующим образом:

a.hello:hover { color: red; }

a.hello:hover {

  color: red;

}

.one:hover { background: green; }

.one:hover {

  background: green;

}

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

Псевдокласс :first-child позволяет оформить первый элемент вложенный внутри родителя.

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

p:first-child { color: blue; }

p:first-child {

  color: blue;

}  

Чтобы выделить первые элементы span во всех параграфах необходимо использовать код:

p span:first-child { color: red; }

p span:first-child {

  color: red;

}  

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

p:first-child span { color: blue; }

p:first-child span {

  color: blue;

}  

C псевдоклассами очень удобно работать в препроцессоре Sass

Еще псевдоклассы

Селектор Пример Описание
:active a:active Выбор активной ссылки
:checked input:checked Все выбранные (отмеченные) элементы input
:checked input:checked Все выбранные (отмеченные) элементы input
:empty p:empty Все элементы p которые не имеет дочерних элементов
:focus input:focus Выбрать элемент input находящийся в фокусе
:invalid input:invalid Выбрать все элементы input с неправильными значениями
:last-child p:last-child Выбрать все элементы p, которые являются последним дочерним элементом родителя
:checked input:checked Все выбранные (отмеченные) элементы input
:required input:required Выбрать все обязательные к заполнению элементы input

Псевдоклассы — Клеверенс — База знаний

Последние изменения: 10.12.2018

Выберите уточнение:

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

Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.

В Mobile SMARTS используются следующие псевдоклассы:

  • hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.

  • active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.

  • disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled=»False».

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Рассмотрим подробнее.

  1. Для кнопок

    Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия. 

    Код кнопки

    CSS
    <button direction="return" ><r  color="#EF5981">ВЫЙТИ</r></button>

    Css-класс white_button

    CSS
    } .white_button:active { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp;

  2. Кнопка неактивна

    CSS
    } white_button:disabled { background-color: #6A7F8D; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; }

  3. Кнопка меняет цвет при длительном нажатии.

    CSS
    } .white_button:hover { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp;
  4. В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.

  5. Для элементов списка.

    При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.

     

    CSS
    .list_item_custom { background-color: #EDF2F6; padding:0dp 0dp 5dp 0dp;    } .list_item_custom:active { background-color: #919191;    padding:0dp 0dp 5dp 0dp; } .list_item_custom:disabled { background-color: #6A7F8D;    padding:0dp 0dp 5dp 0dp; }

Псевдоклассы CSS — Примеры

Помимо CSS селекторами рассмотрим псевдоклассы.
a:hover{ color:#333333; }
селектор:псевдокласссвойствозначение

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

<style type="text/css">
  a:link { color: blue; } /* не посещённые ссылки */ 

  a:visited { color: green; } /* посещённые ссылки */ 
</style>

<a href="#">анкор</a>
анкор

Псевдоклассы, благодаря которым осуществляется динамическое изменение элемента

<style type="text/css">
  div { width: 50%; }

  div:hover { width: 100%; } /* изменение происходит при наведении (увеличивается ширина блока) */ 

  div:active { /* изменение происходит при нажатии (блок смещается вниз) */   
  position: relative;
  top: 10px; 
} 
</style>

<div>содержимое</div>

навести мышку и нажать

Теперь вспомним о хэш-ссылках. Тег a также можно вынести за пределы div.

<style type="text/css">
  div { width: 50%; }

  div:target { width: 100%; } /* при переходе на URL с символом # (http://shpargalkablog.ru/2012/02/psevdoklassy-css.html#target) */ 
</style>

<div><a href="#target">нажать</a></div>

Для элементов формы, таких как input, select и textarea

Псевдокласс :focus также функционирует для других элементов, но нужны дополнительные атрибуты.
<style type="text/css">
  input { width: 50%; } 

  input:focus { width: 100%; } /* изменение происходит при фокусе (увеличивается ширина блока) */ 
</style>

<input type="text" placeholder="подсказка"/>
<style type="text/css">
  input:valid { border: 3px groove green; } /* при соответствии указанному типу */ 

  input:invalid { border: 3px groove red; } /* при несоответствии указанному типу */ 
</style>

<input type="email"/><input type="url"/>
<style>
  input:in-range { border: 3px groove green; } /* в пределах диапазона допустимых значений */ 

  input:out-of-range { border: 3px groove red; } /* за пределами диапазона допустимых значений */ 
</style>

<input type="number" max="10" min="1" value="5"><input type="number" max="10" min="1" value="11">
<style type="text/css">
input[type="radio"] + label ~ input[type="checkbox"],
input[type="radio"] + label ~ input[type="checkbox"] + label,
input[type="radio"] + label ~ input[type="checkbox"] + label + br { display: none; } 

input[type="radio"]:checked + label ~ input[type="checkbox"],
input[type="radio"]:checked + label ~ input[type="checkbox"] + label,
input[type="radio"]:checked + label ~ input[type="checkbox"] + label + br { display: inline-block; } /* изменение видно при установлении галочки */

:default{ background: yellow; } /* выделенный по умолчанию элемент формы */ 
</style>

<form>

<input type="radio" name="odin"/> <label>пункт</label>
<input type="checkbox"/> <label>подпункт</label>
<input type="checkbox"/> <label>подпункт</label>
<input type="radio" name="odin"/> <label>пункт</label>

<button>Кнопка 1</button>
</form>

выбрать пункт
подпункт
подпункт
выбрать пункт

Помимо :checked есть ещё :indeterminate. Но он может найти своё применение разве что с помощью jQuery (автор). А вместо остальных можно применить селектор с соответствующим атрибутом.

в теге есть атрибутв теге отсутствует атрибутописание атрибута
:read-only[readonly]:read-write:not([readonly])не может изменяться пользователем
:required[required]:optional:not([required])обязательное для заполнения
:disabled[disabled]:enabled:not([disabled])недоступным для активации, не может получить фокус

Структурные псевдоклассы

Пропускаю :root в связи с его заменой на html.

<style type="text/css">
b:nth-child(1) { color: red; }  /* или */  b:first-child { color: red; } 

b:nth-child(4) { color: blue; }  /* или */  b:nth-last-child(12) { color: blue; }

b:nth-child(8) { background: green; display: inline-block; padding: 3px; }  /* или */  b:empty { background: green; display: inline-block; padding: 3px; }

b:nth-child(15) { color: orange; }  /* или */  b:last-child { color: orange; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b></b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 9 10 11 12 13 14 15 стиль присваивается одному (порядковый номер в скобках :nth-child) из одинаковых тегов, :first-child — для первого из однородных тегов, :last-child — для последнего, :empty — для пустого.

<style type="text/css">
b:not(.izo) { color: red; }  /* или */  b:not([title="без стиля"]) { color: red; }
</style>

<b>1</b> <b>2</b> <b title="без стиля">3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается всем элементам, кроме того, который содержит в первом случае или title=»без стиля» во втором.

<style type="text/css">
b:nth-child(n+9) { color: red; }

b:nth-child(-n+5) { color: orange; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается всем после/до определённого номера.

<style type="text/css">
b:nth-child(4n) { color: red; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается элементам, чередующимся на 4, другими словами 4, 4*2, 4*3 …

<style type="text/css">
b:nth-child(4n+5) { color: red; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается элементам, чередующимся на 4, но начинающимся спустя 5 цифр, а именно 5, 5+4, 5+4*2, 5+4*3 …

<style type="text/css">
b:nth-child(4n-5) { color: red; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 сразу перейдём к расчётам, а именно 4-5 (отрицательное число пропускается), 5-4*2, 5-4*3, 5-4*4 …

<style type="text/css">
b:nth-child(even) { color: red; }

b:nth-child(odd) { color: blue; }
</style>

<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль применим ко всем чётным/нечётным.


Чтобы не утруждать себя подсчётами, можно воспользоваться nth-child tester page.

:nth-last-child действует аналогично, только подсчёт ведёт от последнего элемента.

<style type="text/css">
b:nth-of-type(3n) { color: red; }
</style>

<b>1</b> <span>☆</span> <b>2</b> <span>☆</span> <b>3</b> <span>☆</span> <b>4</b> <span>☆</span> <b>5</b> <span>☆</span> <b>6</b> <span>☆</span> <b>7</b> <span>☆</span> <b>8</b>

12345678 нужно выбрать цифры, заключённые в тег b, и среди них присвоить стиль только цифрам, заключённые в тег b и идущим через 3. То есть :nth-of-type осуществляет выборку элементов из указанного типа (их в примере выше 8).

<style type="text/css">
b:nth-child(3n) { color: red; }
</style>

<b>1</b> <span>☆</span> <b>2</b> <span>☆</span> <b>3</b> <span>☆</span> <b>4</b> <span>☆</span> <b>5</b> <span>☆</span> <b>6</b> <span>☆</span> <b>7</b> <span>☆</span> <b>8</b>

12345678 :nth-child берёт в расчёт все 15 элементов, но стиль присваивает в том случае, когда порядковая цифра и тег, в данном случае b, совпадают. То есть он выбрал бы и звезду между цифрами 3 и 4, если бы она была заключена в тег b.

:nth-last-of-type действует аналогично :nth-of-type, только подсчёт ведёт от последнего элемента.

<style type="text/css">
b:only-child { color: red; }
</style>

☆ <span><b>1.1</b> <b>1.2</b></span> ☆ <span><b>2.1</b></span> ☆ <span><b>3.1</b> <b>3.2</b></span> ☆

1.1 1.22.13.1 3.2 ☆ стиль действует, когда в родителе присутствует только один элемент. То есть в теге span содержится лишь один тег b.

Разницу между :first-child (см. первый пример Структурных псевдоклассов) и :first-of-type, :last-child и :last-of-type, :only-child и :only-of-type в отображении браузерами я не увидела.

Языковой псевдокласс

<style type="text/css">
:lang(en){ font-style: italic; }
</style>

<span lang="en"> ru - Russian; en - English; de - German; fr - French; it - Italian </span>

ru — Russian; en — English; de — German; fr — French; it — Italian для слов на английском языке будет присвоен наклонный стиль. Для большинства браузеров требуется атрибут lang.

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


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

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

Например, его можно использовать для:

  • Стиль элемента, когда пользователь наводит курсор мыши на него
  • Различный стиль посещенных и непосещенных ссылок
  • Стиль элемента, когда он получает фокус

Синтаксис

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

селектор: псевдокласс {
свойство: значение;
}


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

Ссылки могут отображаться по-разному:

Пример

/ * непосещенная ссылка * /
a: link {
color: # FF0000;
}

/ * посетил ссылка * /
a: посетил {
color: # 00FF00;
}

/ * наведение указателя мыши на ссылку * /
a: hover {
color: # FF00FF;
}

/ * выбранная ссылка * /
a: активна {
цвет: # 0000FF;
}

Попробуй сам »

Примечание: a: hover ДОЛЖЕН стоять после a: link и a: посетил в определении CSS, чтобы быть эффективным! a: активный ДОЛЖЕН быть после a: наведите указатель мыши на в определении CSS для повышения эффективности! Имена псевдоклассов не чувствительны к регистру.



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

Псевдоклассы можно комбинировать с классами CSS:

Когда вы наводите курсор на ссылку в примере, она меняет цвет:


Наведите курсор на

Пример использования псевдокласса : hover в элементе

:


Простая всплывающая подсказка

Наведите указатель мыши на элемент

, чтобы отобразить элемент

(например, всплывающую подсказку):

Наведите указатель мыши на меня, чтобы показать элемент

.

Тада! А вот и я!

Пример

p {
дисплей: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}

div: hover p {
display: block;
}

Попробуй сам »

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

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

Соответствует первому элементу

В следующем примере селектор соответствует любому элементу

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


Соответствует первому элементу

во всех элементах

В следующем примере селектор соответствует первому элементу во всех элементах

:


Сопоставить все элементы

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

В следующем примере селектор соответствует всем элементам в элементах

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


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

Псевдокласс : lang позволяет определять специальные правила для разных языков.

В приведенном ниже примере : lang определяет кавычки для элементов с lang = «no»:

.

Пример




q: lang (no) {
цитаты: «~» «~»;
}

Некоторый текст Цитата в абзаце Немного текста.


Попробуй сам »

Другие примеры

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

Использование: focus
В этом примере показано, как использовать псевдокласс: focus.


Проверьте себя упражнениями!


Все псевдоклассы CSS

Селектор Пример Описание примера
: активный a: активный Выбирает активную ссылку
: проверен ввод: проверен Выбирает каждый отмеченный элемент
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто п: пусто Выбирает каждый элемент

, не имеющий дочерних элементов

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

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

: первый в своем роде п: первоклассный Выбирает каждый элемент

, который является первым элементом

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

: фокус ввод: фокус Выбирает элемент , имеющий фокус
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах вход: в пределах Выбирает элементы со значением в указанном диапазоне
: недопустимый ввод: недопустимый Выбирает все элементы с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

, значение атрибута lang которого начинается с «it».

: последний ребенок р: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя

: последний тип п: последний тип Выбирает каждый элемент

, который является последним элементом

его родительского элемента

: ссылка а: ссылка Выбирает все непосещенные ссылки
: нет (селектор) : нет (р) Выбирает каждый элемент, не являющийся элементом

: nth-child (n) p: nth-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя

: nth-последний-ребенок (n) p: nth-last-child (2) Выбирает каждый элемент

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

: nth-last-of-type (n) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родителя, считая от последнего дочернего элемента

: nth-of-type (n) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

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

: только тип п: одинарный Выбирает каждый элемент

, который является единственным элементом

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

: только ребенок p: только ребенок Выбирает каждый элемент

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

: опционально ввод: опционально Выбирает элементы без «обязательного» атрибута
: вне допустимого диапазона вход: вне допустимого диапазона Выбирает элементы со значением вне указанного диапазона
: только для чтения ввод: только для чтения Выбирает элементы с указанным атрибутом «только для чтения»
: чтение-запись ввод: чтение-запись Выбирает элементы без атрибута «только для чтения»
: требуется ввод: требуется Выбирает элементы с указанным атрибутом «required»
: корень корень Выбирает корневой элемент документа
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действительный Выбирает все элементы с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

Все псевдоэлементы CSS

Селектор Пример Описание примера
:: после р :: после Вставлять содержимое после каждого элемента

:: до р :: до Вставлять содержимое перед каждым элементом

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

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


Псевдоклассы — CSS: каскадные таблицы стилей

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

 
button: hover {
  цвет синий;
}  

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

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

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

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

Эти псевдоклассы относятся к ссылкам и целевым элементам в текущем документе.

: любая ссылка
Соответствует элементу, если элемент соответствует : ссылка или : посещено .
: ссылка
Соответствует ссылкам, которые еще не были посещены.
: посетил
Соответствует посещенным ссылкам.
: локальная ссылка
Соответствует ссылкам, абсолютный URL-адрес которых совпадает с целевым URL-адресом, например якорные ссылки на ту же страницу.
: цель
Соответствует элементу, являющемуся целью URL-адреса документа.
: цель - в пределах
Соответствует элементам, являющимся целью URL-адреса документа, а также элементам, у которых есть потомок, являющийся целью URL-адреса документа.
: объем
Представляет элементы, которые служат ориентиром для выбора селекторов.

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

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

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

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

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

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

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

: автозаполнение
Соответствует, когда браузер автоматически заполнил .
: включено
Представляет элемент пользовательского интерфейса, находящийся во включенном состоянии.
: отключено
Представляет элемент пользовательского интерфейса, находящийся в отключенном состоянии.
: только для чтения
Представляет любой элемент, который не может быть изменен пользователем.
: чтение-запись
Представляет любой элемент, доступный для редактирования пользователем.
: показан заполнитель
Соответствует элементу ввода, отображающему текст заполнителя, например, из атрибута заполнителя HTML5 .
: по умолчанию
Соответствует одному или нескольким элементам пользовательского интерфейса, которые используются по умолчанию в наборе элементов.
: проверено
Соответствует включенным элементам, таким как флажки и переключатели.
: неопределенный
Соответствует, когда элементы пользовательского интерфейса находятся в неопределенном состоянии.
: пусто
Соответствует пустому элементу пользовательского ввода, содержащему пустую строку или другой нулевой ввод.
: действует
Соответствует элементу с допустимым содержимым. Например, элемент ввода с типом «электронная почта», который содержит правильно сформированный адрес электронной почты.
: недопустимый
Соответствует элементу с недопустимым содержимым. Например, элемент ввода с типом «электронная почта» с введенным именем.
: в пределах диапазона
Применяется к элементам с ограничениями диапазона, например к ползунку, когда выбранное значение находится в допустимом диапазоне.
: вне допустимого диапазона
Применяется к элементам с ограничениями диапазона, например к ползунку, когда выбранное значение выходит за пределы допустимого диапазона.
: требуется
Соответствует, когда требуется элемент формы.
: дополнительно
Соответствует, когда элемент формы является необязательным.
: недействительный пользователь
Представляет элемент с неверным вводом, но только тогда, когда пользователь взаимодействовал с ним.

Эти псевдоклассы относятся к расположению элемента в дереве документа.

: корень
Представляет элемент, являющийся корнем документа.В HTML это обычно элемент .
: пусто
Представляет элемент без дочерних элементов, кроме символов пробела.
: nth-ребенок
Использует нотацию A n + B для выбора элементов из списка родственных элементов.
: nth-последний-ребенок
Использует нотацию A n + B для выбора элементов из списка родственных элементов, считая в обратном порядке от конца списка.
: первенец
Соответствует элементу, являющемуся первым из его братьев и сестер.
: последний ребенок
Соответствует элементу, являющемуся последним из его братьев и сестер.
: только ребенок
Соответствует элементу, у которого нет братьев и сестер. Например, элемент списка, в котором нет других элементов списка.
: nth-of-type
Использует нотацию A n + B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов.
: последний тип
Использует нотацию A n + B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу, из списка одноуровневых элементов, считая в обратном порядке от конца списка.
: первый в своем роде
Соответствует элементу, являющемуся первым из его братьев и сестер, а также соответствует определенному селектору типа.
: последний тип
Соответствует элементу, который является последним из его братьев и сестер, а также соответствует определенному селектору типа.
: только тип
Соответствует элементу, не имеющему братьев и сестер для выбранного селектора типа.
  селектор: псевдокласс {
  стоимость имущества;
}
  

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

Псевдоклассы, определенные набором спецификаций CSS, включают следующее:

А B
  • : blank Это экспериментальный API, который не следует использовать в производственном коде.
С
  • : проверен
  • : текущий Это экспериментальный API, который не следует использовать в производственном коде.
D E F ЧАС я L N О п р S
  • : объем
  • : state () Это экспериментальный API, который не следует использовать в производственном коде.
т U
  • : недопустимый пользователем Это экспериментальный API, который не следует использовать в производственном коде.
В W
  • : where () Это экспериментальный API, который не следует использовать в производственном коде.
Спецификация Статус Комментарий
Полноэкранный режим API Уровень жизни Определено : полноэкранный .
HTML Уровень жизни Уровень жизни Определяет, когда определенные селекторы соответствуют элементам HTML.
Селекторы уровня 4 Осадка рабочий Определено : any-link , : blank , : local-link , : scope , : drop , : текущий , : прошлый , : будущий , : заполнитель- показано , : недопустимый пользователем , : nth-col () , : nth-last-col () , : is () и : где () .
Изменено : пустой , чтобы вести себя как : -moz-only-whitespace Этот API не был стандартизирован.
Нет значительных изменений для других псевдоклассов, определенных в селекторах уровня 3 и HTML5 (хотя семантическое значение не принимается) .
HTML5 Рекомендация Копирует соответствующий раздел из канонической (WHATWG) спецификации HTML.
Модуль базового пользовательского интерфейса CSS, уровень 3 Рекомендация Определено : по умолчанию , : допустимо , : недопустимо , : находится в диапазоне , : вне диапазона , : требуется , : необязательно , : только для чтения и : чтение-запись , но без связанного семантического значения.
Селекторы уровня 3 Рекомендация Определено : цель , : корень , : nth-child () , : nth-last-of-child () , : nth-of-type () , : nth-last -of-type () , : последний ребенок , : первый тип , : последний тип , : только ребенок , : только тип , : пусто и : нет () .
Определен синтаксис : включен , : отключен , : проверен и : неопределенный , но без соответствующего семантического значения.
Нет значительных изменений для псевдоклассов, определенных в CSS Level 2 (Revision 1).
CSS, уровень 2 (редакция 1) Рекомендация Определено : lang () , : первый ребенок , : hover и : focus .
Нет значительных изменений для псевдоклассов, определенных в CSS Level 1.
CSS Уровень 1 Рекомендация Определено : ссылка , : посещена и : активна , но без связанного семантического значения.

: target — CSS: каскадные таблицы стилей

Псевдокласс CSS : target представляет собой уникальный элемент (целевой элемент ) с идентификатором id , соответствующим фрагменту URL.

 
:цель {
  граница: 2 пикселя сплошного черного цвета;
}  

Например, следующий URL-адрес содержит фрагмент (обозначенный знаком # ), который указывает на элемент с именем section2 :

 http: // www.example.com/index.html#section2 

Следующий элемент будет выбран селектором : target , если текущий URL равен указанному выше:

  
Пример

Оглавление

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

HTML
   

Содержание

  1. Перейти к первому абзацу!
  2. Перейти ко второму абзацу!
  3. Эта ссылка никуда не ведет, потому что цель не существует.

Моя забавная статья

Вы можете настроить таргетинг на этот абзац , используя Фрагмент URL. Нажмите на ссылку выше, чтобы попробовать!

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

CSS
  p: target {
  цвет фона: золото;
}


p: target :: before {
  шрифт: 70% без засечек;
  содержание: «►»;
  цвет: салатовый;
  маржа-право:.25em;
}


p: target i {
  красный цвет;
}  
Результат

Чистый CSS-лайтбокс

Вы можете использовать псевдокласс : target для создания лайтбокса без использования какого-либо JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После нацеливания CSS изменяет свой display , чтобы они отображались.

HTML
  

<рисунок>
Lorem ipsum dolor sit amet, conctetur adipiscing elit.Donec felis enim, placerat id eleifend eu, semper vel sem.
<рисунок>
Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
CSS
 
.lightbox {
  дисплей: нет;
}


.lightbox: target {
  позиция: абсолютная;
  слева: 0;
  верх: 0;
  ширина: 100%;
  высота: 100%;
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}


.lightbox figcaption {
  ширина: 25бэр;
  положение: относительное;
  заполнение: 1.5em;
  цвет фона: светло-розовый;
}


.lightbox .close {
  положение: относительное;
  дисплей: блок;
}

.lightbox .close :: after {
  справа: -1бэр;
  верх: -1 бэр;
  ширина: 2бэр;
  высота: 2бэр;
  позиция: абсолютная;
  дисплей: гибкий;
  z-индекс: 1;
  align-items: center;
  justify-content: center;
  цвет фона: черный;
  радиус границы: 50%;
  цвет белый;
  содержание: «×»;
  курсор: указатель;
}


.lightbox .close :: before {
  слева: 0;
  верх: 0;
  ширина: 100%;
  высота: 100%;
  положение: фиксированное;
  цвет фона: rgba (0,0,0 ,.7);
  содержание: "";
  курсор: по умолчанию;
}  
Результат

Таблицы BCD загружаются только в браузере

Псевдоклассы и псевдоэлементы — Изучите веб-разработку

Следующий набор селекторов, который мы рассмотрим, называется псевдоклассом и псевдоэлементом . Их очень много, и они часто служат совершенно конкретным целям. Когда вы узнаете, как их использовать, вы можете просмотреть список, чтобы увидеть, есть ли что-то, что подходит для той задачи, которую вы пытаетесь решить.Еще раз, соответствующая страница MDN для каждого селектора полезна для объяснения поддержки браузером.

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

Псевдоклассы — это ключевые слова, начинающиеся с двоеточия:

:  имя псевдокласса  

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

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

Однако это может раздражать — что, если новый абзац будет добавлен в начало документа? Нам нужно переместить класс в новый абзац. Вместо добавления класса мы могли бы использовать селектор псевдокласса : first-child — это всегда будет нацеливать на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (это может не всегда быть возможным в любом случае, возможно, из-за того, что он генерируется CMS.)

Все псевдоклассы ведут себя одинаково. Они нацелены на некоторую часть вашего документа, которая находится в определенном состоянии, и ведет себя так, как если бы вы добавили класс в свой HTML. Взгляните на другие примеры на MDN:

.

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

, а не только первым дочерним элементом абзаца — : first-child эквивалентно *: первый ребенок .Однако обычно вам нужно больше контроля, поэтому вам нужно быть более конкретным.

Псевдоклассы действий пользователя

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

  • : hover — упомянуто выше; это применимо только в том случае, если пользователь наводит указатель на элемент, обычно ссылку.
  • : focus — применяется только в том случае, если пользователь фокусирует элемент с помощью управления с клавиатуры.

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

  :: имя-псевдоэлемента  

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

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

Селектор псевдоэлементов :: first-line сделает это за вас надежно — если количество слов увеличивается или уменьшается, он все равно выберет только первую строку.

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

Вы можете видеть, что это выбирает первую строку обоих абзацев.

Если вы хотите выделить первую строку первого абзаца жирным шрифтом, вы можете связать селекторы : first-child и :: first-line вместе.Попробуйте отредактировать предыдущий живой пример, чтобы он использовал следующий CSS. Мы говорим, что хотим выбрать первую строку первого элемента

, который находится внутри элемента

.

  article p: first-child :: first-line {
  размер шрифта: 120%;
  font-weight: жирный;
}  

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

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

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

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

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

В следующем примере мы добавили пустую строку, используя псевдоэлемент :: before . Мы установили для него значение display: block , чтобы мы могли стилизовать его по ширине и высоте.Затем мы используем CSS, чтобы стилизовать его, как любой элемент. Вы можете поэкспериментировать с CSS и изменить его внешний вид и поведение.

Использование псевдоэлементов :: before и :: after вместе со свойством content называется «сгенерированным содержимым» в CSS, и вы часто увидите, что этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам создавать стрелки с помощью CSS. Посмотрите на CSS, когда вы создаете свою стрелку, и вы увидите используемые псевдоэлементы :: before и :: after .Всякий раз, когда вы видите эти селекторы, посмотрите на свойство content , чтобы увидеть, что добавляется в документ.

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

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

Селектор Описание
: активный Соответствует моменту, когда пользователь активирует (например, нажимает) элемент.
: любая ссылка Соответствует как : ссылка , так и : посещено состояний ссылки.
: пусто Соответствует элементу , входное значение которого пусто.
: проверен Соответствует переключателю или флажку в выбранном состоянии.
: текущий Соответствует элементу или предку элемента, который отображается в данный момент.
: по умолчанию Соответствует одному или нескольким элементам пользовательского интерфейса, которые используются по умолчанию среди набора похожих элементов.
: дирек Выберите элемент в зависимости от его направленности (значение атрибута HTML dir или свойства direction CSS).
: отключено Соответствует элементам пользовательского интерфейса, находящимся в отключенном состоянии.
: пустой Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
: включено Соответствует элементам пользовательского интерфейса, находящимся во включенном состоянии.
: первый В страничном носителе соответствует первой странице.
: первенец Соответствует элементу, который является первым среди его братьев и сестер.
: первый в своем роде Соответствует элементу, который является первым элементом определенного типа среди его братьев и сестер.
: фокус Соответствует, когда элемент находится в фокусе.
: видимый в фокусе Соответствует, когда элемент находится в фокусе и фокус должен быть виден пользователю.
: в фокусе Соответствует элементу с фокусом и элементу с потомком, у которого есть фокус.
: будущее Соответствует элементам после текущего элемента.
: парение Соответствует, когда пользователь наводит курсор на элемент.
: неопределенный Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно это флажки.
: в пределах диапазона Соответствует элементу с диапазоном, если его значение находится в диапазоне.
: недействительно Соответствует элементу, например , в недопустимом состоянии.
: язык Соответствует элементу на основе языка (значение атрибута HTML lang).
: последний ребенок Соответствует элементу, который является последним среди его братьев и сестер.
: последний тип Соответствует элементу определенного типа, который является последним среди его братьев и сестер.
: слева В страничном носителе соответствует левым страницам.
: ссылка Соответствует непосещенным ссылкам.
: локальная ссылка Соответствует ссылкам, указывающим на страницы, которые находятся на том же сайте, что и текущий документ.
: есть () Соответствует любому из селекторов в переданном списке селекторов.
: не Соответствует вещам, не совпадающим с селекторами, которые передаются как значение в этот селектор.
: nth-ребенок Сопоставляет элементы из списка братьев и сестер — братья и сестры сопоставляются по формуле вида an + b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. Д. Все нечетные.)
: nth-of-type Сопоставляет элементы из списка братьев и сестер определенного типа (например,

элементов) — братья и сестры сопоставляются по формуле вида an + b (e.грамм. 2n + 1 соответствует этому типу элемента, числам 1, 3, 5, 7 и т. Д. Все нечетные.)

: nth-последний-ребенок Соответствует элементам из списка братьев и сестер, считая в обратном порядке от конца. Братья и сестры соответствуют формуле вида an + b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем двум элементам перед этим, затем двум элементам перед этим и т. Д. Все нечетные, считая от конец.)
: последний тип Соответствует элементам из списка братьев и сестер определенного типа (например,грамм.

элементов), считая в обратном порядке от конца. Братья и сестры сопоставляются формулой вида an + b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем двум элементам перед этим, затем двум элементам перед этим и т. Д. Все нечетные. , считая с конца.)

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

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

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

Псевдоклассы | HTML Dog

Ссылки

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

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

 
: ссылка  {
    цвет синий;
}

: посетил  {
    цвет: фиолетовый;
}
  

Рекламируйте здесь! На давнем, начитанном и уважаемом ресурсе веб-разработки.

Динамические псевдоклассы

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

Изменение стилей поля при наведении курсора на него.
  • active — это когда что-то активируется пользователем, например, когда нажимается ссылка.
  • hover используется, когда что-то передается вводом от пользователя, например, когда курсор перемещается по ссылке.
  • focus — когда что-то получает фокус, то есть когда оно выбрано или готово к вводу с клавиатуры.

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

 
a : active  {
    красный цвет;
}

a : hover  {
    текстовое оформление: нет;
    цвет синий;
    цвет фона: желтый;
}

input : focus , textarea : focus  {
    фон: #eee;
}
  

Первые дети

Наконец (по крайней мере, для этой статьи) существует псевдокласс first-child .Это будет нацелено на что-то, только если это самый первый потомок элемента. Итак, в следующем HTML…

 

    

Я ребенок первого абзаца текста. Я руляю. Слушайся меня.

Я обижен на вас.

...

… если вы хотите стилизовать только первый абзац , вы можете использовать следующий CSS:

 
p : first-child  {
    font-weight: жирный;
    размер шрифта: 40 пикселей;
}
  

CSS3 также предоставил совершенно новый набор псевдоклассов: last-child , target , first-of-type и другие.

Как создавать псевдоклассы с помощью CSS

Часть серии: Как создать сайт с помощью CSS

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

Прежде чем продолжить, мы рекомендуем вам немного знать HTML, стандартный язык разметки, используемый для отображения документов в веб-браузере. Если вы не знакомы с HTML, вы можете изучить первые десять руководств нашей серии «Как создать веб-сайт с помощью HTML», прежде чем начинать эту серию.

Введение

В этом руководстве вы создадите псевдоклассы CSS и узнаете, как и зачем их использовать. Вы также попрактикуетесь в использовании псевдокласса : hover , который позволяет нам изменять стиль элемента при наведении на него курсора пользователя.

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

Псевдоклассы объявляются в CSS путем добавления : и имени псевдокласса к селектору тега, класса или идентификатора.Затем этот псевдокласс будет автоматически применяться к любому содержимому HTML, которому назначен тег, класс или идентификатор псевдокласса. Вам не нужно добавлять дополнительный код в элемент HTML, чтобы псевдокласс работал.

Предварительные требования

Чтобы следовать этому руководству, убедитесь, что вы настроили необходимые файлы и папки, как описано в предыдущем руководстве из этой серии «Как настроить проект CSS и HTML для практики».

Создание псевдокласса с помощью CSS

Давайте теперь попробуем практическое упражнение, чтобы узнать, как работают псевдоклассы.Во-первых, убедитесь, что вы настроили необходимые файлы и папки, как описано в предыдущем руководстве этой серии «Как настроить проект CSS и HTML».

Удалите все в своем файле styles.css (если вы добавляли содержимое из предыдущих руководств) и добавьте псевдокласс, указанный ниже, в свой документ:

styles.css

  img: hover {
 граница: сплошной красный 10px;
}
  

В этом фрагменте кода вы добавили выделенный псевдокласс : hover в селектор тегов .Сохраните файл и вернитесь к файлу index.html и сотрите все (кроме первой строки кода: ). Затем добавьте следующий фрагмент HTML-кода в файл index.html :

index.html

  
  

Обратите внимание, что для удобства вы получаете изображение в Интернете. Вы также можете использовать свое собственное изображение, указав путь к файлу, как описано в нашем руководстве «Как добавить изображения на свою веб-страницу с помощью HTML».

Сохраните файл index.html и загрузите его в браузер. (Инструкции по загрузке файла HTML см. В шаге нашего руководства «Как просмотреть автономный файл HTML в браузере»).

Вы должны получить что-то вроде этого:

Теперь на веб-странице должно отображаться изображение акулы Сэмми. Попробуйте навести курсор на изображение. При наведении курсора на изображение вокруг изображения должна появиться сплошная красная рамка шириной 10 пикселей.Ваш браузер автоматически применяет псевдокласс : hover , когда ваш курсор взаимодействует с элементом img на основе правила, которое вы добавили в styles.css .

Вы также можете использовать псевдокласс : hover с текстовыми элементами. Если вы хотите попробовать применить : hover к текстовому элементу, сотрите все в файле styles.css и добавьте в документ псевдокласс, указанный ниже:

styles.css

  p: hover {
  размер шрифта: 100 пикселей;
  красный цвет;
}
  

Сохраните стили .css файл. Вернитесь к файлу index.html , сотрите все (кроме первой строки кода: ) и добавьте следующий фрагмент кода:

index.html

  

Немного текста

Сохраните файл и загрузите его в браузере, чтобы проверить результаты. Вы должны получить страницу с текстом «Some text», который меняет цвет и размер при наведении курсора на нее:

Заключение

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

В следующем руководстве вы узнаете о создании и стилизации элемента HTML

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

псевдоклассов CSS — Бесплатное руководство по изучению HTML и CSS

Мы видели, что существует в основном 3 типа селекторов CSS:

  • общий , где p в CSS нацелены на

    HTML-элементы

  • классы , где .Введение в CSS нацелено на элементы HTML с атрибутом class = "intro"
  • ids , где #logo в CSS нацелены на элементы HTML с атрибутом id = "logo"

Ко всем этим селекторам может быть прикреплено псевдоклассов . Псевдокласс:

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

Синтаксис

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

Синтаксис выглядит так:

  .selector: псевдокласс {}  

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

: парение

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

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

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

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

: посетил

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

  a {color: dodgerblue;}
a: посетил {color: rebeccapurple;}  
   Google 
 Twitter 
 Facebook 
 Mozilla 
 MarkSheet   

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

: фокус

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

  .form-input {border: 2px сплошной серый; padding: 5px;}
.form-input: focus {фон: светло-желтый; цвет границы: синий; контур: нет;}  

Наброски : нет; Правило убирает свечение со входа.

: первый ребенок и: последний ребенок

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

  
  • Один
  • Два
  • Три
  • Четыре
  li: first-child {background: greenyellow;}
li: last-child {background: lightsalmon;}  

Как видите, класс CSS не применяется к первому и последнему

  • .Их позиция в иерархии определяет, применяется ли правило CSS.

    Если бы мы добавили 5-й элемент списка и использовали бы тот же CSS , стиль автоматически изменился бы:

    : эн-ребенок

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

    Например, если вы хотите настроить таргетинг на второго дочернего элемента , вы должны использовать : nth-child (2) :

      li: nth-child (2) {background: violet;}  
    нечетное и четное

    Хотя использовать число просто, : nth-child содержит 2 ключевых слова:

    • : 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-й, так и на 6-й элементы списка:

    • 3 раза 0 равно нулю
    • 3 раза по 1 — это 3-й элемент
    • 3 раза по 2 — шестой элемент
    к + 1

    Что делать, если вы хотите настроить таргетинг на 1-й элемент и каждый третий элемент после этого ?

      li: nth-child (3n + 1) {background: limegreen;}  
    • Один
    • Два
    • Три
    • Четыре
    • Пять
    • Шесть
    • Семь

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

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

    Вот как обрабатывались расчеты:

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

    Итератор n очень универсален.