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

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

1 ☆ 2 ☆ 3 ☆ 4 ☆ 5 ☆ 6 ☆ 7 ☆ 8 нужно выбрать цифры, заключённые в тег 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>

1 ☆ 2 ☆ 3 ☆ 4 ☆ 5 ☆ 6 ☆ 7 ☆ 8 :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.2 ☆ 2.1 ☆ 3.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? | Impuls-Web.ru

Приветствую вас, дорогие друзья!

Хотите узнать, как использовать псевдоклассы CSS для быстрого изменения оформление определенных блоков на вашем сайте не внося правок в HTML или PHP-код? Тогда читайте статью до конца! В ней я расскажу о том, какие возможности дают нам псевдоклассы CSS, каких видов они бывают, и покажу несколько конкретных примеров их практического применения.

Навигация по статье:

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

При этом наш элемент будет вести себя так, как будто бы мы присваивали ему какой-то свой новый CSS-класс. Хотя, по факту, мы никакого нового класса ему не задавали!

«Как работать c before и after в CSS?»

Все псевдоклассы CSS условно разделяют на несколько групп:

• Структурные псевдоклассы
• Динамические псевдоклассы
• Языковые псевдоклассы
• Псевдоклассы отрицания др.

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

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

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

<div> <div> Январь </div> <div> Февраль </div> <div lang=»en»> March </div> … <div> Декабрь </div> </div> </div>

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

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

1. 1.Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
2. 2.Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
3. 3.Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать:
   :first-child
4. 4.В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.
   

   .iw-blocks .block:first-child { background:#034B85; color:#fff; }

   .iw-blocks .block:first-child  { background:#034B85; color:#fff; }

После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.

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

<div> <div> <p>Декабрь</p> <p>Январь</p> <p>Февраль</p> </div> … </div>

В этом случае пишем так:

. iw-blocks .block:first-child p { background:#ccc; }

Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.

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

Например:

<ul class=”my-list”> <li>Январь</li> <li>Февраль</li> <li>Март</li> </ul>

CSS:

. my-list li:last-child { background:#ccc; }

• :nth-last-child(3) – применяет стили для третьего дочернего элемента с конца. Вместо значения 3 может стоять любое число.
• :nth-child(2) — применяет стили для второго дочернего элемента по порядку. В скобках может стоять любое другое число.
• :nth-child(2n) — этот псевдокласс применяет стили для каждого второго дочернего элемента по порядку.

• :nth-child(even) — срабатывает для элементов с чётными порядковыми номерами.
• :nth-child(odd) — срабатывает для элементов с нечётными порядковыми номерами.
• .block span:first-of-type — применяется для первого тега span, стоящего внутри тега с классом block. Вместо span может указываться любой тег.
• .block span:nth-last-of-type – срабатывает для последнего span в теге с указанным классом.
• .block span:nth-of-type(3) —стили применятся для третьего тега span внутри тега с классом block.

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

• :only-child — сработает, если элемент является единственным дочерним.
• :only-of-type — применяет слили для единственного элемента указанного типа в родительском блоке.
• :empty — сработает для элемента, который не имеет вложенных тегов.
• :root – корневой элемент на странице.

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

• :hover — этот псевдокласс применит CSS стили для элемента при наведении на него курсора мышки.
• :focus, :active — позволяет применить нужные CSS свойства для ссылок, полей форм, кнопок и других элементов, которые активировали (выделили) кликом мышки или переходом при помощи клавиши TAB на клавиатуре.
• :link — псевдокласс для ссылки, по которой не осуществлялся переход.
• :visited — псевдокласс для ссылки, по которой посетитель уже переходил.

Псевдокласс отрицания

div:not(.price) – применит CSS свойства для всех блоков div, кроме блоков с классом price

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

span:not(:last-child) – псевдокласс применит CSS свойства ко всем тегам span кроме последнего.

Использование языкового псевдокласса CSS

Так же мы можем использовать псевдокласс :lang() для выделения блоков принадлежащих к определённому языку.

Для того чтобы браузеру было понятно какой это язык у блока должен стоять атрибут с кодом языка

Далее в CSS нужно будет указать псевдокласс :lang(en) со значением языка.

<div lang=»en»> Example text </div>

CSS:

.text:lang(en) { background:#ccc; }

Видеоинструкция

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

На этом у меня всё! Успехов вам!

С уважением Юлия Гусарь

Как работает в css псевдокласс not?

От автора: всем привет. Сегодня мы с вами рассмотрим достаточно специфичную тему. А именно, как работает в css псевдокласс not. Возможно, многие из вас вообще ничего не знают о нем, но тем не менее данный псевдокласс иногда очень помогает при верстке. Подробно суть работы с ним рассмотрим сейчас.

Вообще как выглядит выбор элементов в css? Вы прописываете какой-либо селектор и таким образом происходит выбор. Например: p{} – выберет все абзацы; table{} – выберет все таблицы;

И так далее. Так вот, псевдокласс not работает наоборот – он позволяет не выбрать какой-либо элемент. Сам по себе псевдокласс применять нет смысла, а только в связке с другими селекторам. Not позволяет как бы исключить элемент из выбора. Например, выбрать все списки, кроме какого-то одного.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<p>Абзац 1</p> <p>Абзац 2</p> <p class = «p3»>Абзац 3</p>

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

p:not(.p3){ color: green; }

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

Синтаксис псевдокласса not, как вы уже могли догадаться, таков:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

p:not(:nth-of-type(3)){ color: green; }

Вот такой код позволит вам исключить третий абзац и ему не будет задан зеленый цвет.

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

.class:not(p.red:nth-of-type(7)){}

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

Применение в реальной практике

Хорошо, мы рассмотрели достаточно оторванные от реальности примеры, но и в реальной практике псевдокласс not может вам пригодится. Например, при работе с меню.

Если в меню есть разделители, то обычно разделитель не должен присутствовать у первого или последнего пункта меню. И это очень легко реализовать. Просто задаем первому или последнему пункту какой-нибудь стилевой класс, либо исключаем его с помощью nth-child/nth-of-type.

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

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

Псевдокласс not очень удобно использовать, когда нужно выбрать группу элементов и привязать к ним стили, но при этом исключить из этой группы 1-2 элемента. Советую вам взять на вооружение эту возможность css и использовать ее в верстке.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

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

От автора: до сих пор мы учились находить элементы по их атрибутам и состояниям. В CSS3 также можно искать элементы просто по их положению в разметке. Эти селекторы носят название структурные псевдоклассы CSS.

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

:root — Корневой элемент – в HTML-файлах это html.

E:nth-child(n) — Элемент E, являющийся n-ным дочерним элементом родителя. Параметр n объясняется в заметке ниже.

E:nth-last-child(n) — Элемент F, являющийся n-ным дочерним элементом родителя E при отсчете с обратной стороны.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

li:nth-last-child(1) – последний элемент любого списка, то же самое что и li:last-child. (см. заметку ниже)

E:nth-of-type(n) — N-ный элемент данного типа внутри родителя. Разница между :nth-child и :nth-of-type поясняется в заметке ниже.

E:nth-last-of-type(n) — Как nth-of-type(n), только отсчет идет с последнего элемента внутри родителя.

Заметка: параметры структурных селекторов

Существует 4 псевдокласса, которые в качестве параметра принимают выражение an+b, odd или even. К структурным псевдоклассам относятся :nth-child(an + b), :nth-last-child(an + b), :nth-of-type(an + b) и :nth-last-of-type(an + b). В выражении an+b символ a является целым множителем, b – целый сдвиг, n – переменная.

В самом простом случае внутрь можно передать целое число. Например, E:nth-of-type(3) найдет третий E внутри одного родителя. Можно передать одно или два ключевых слова odd или even. Также можно передавать выражения типа E:nth-of-type(3n+1). 3n – каждый третий элемент (частота), +1 – сдвиг. Сдвиг по умолчанию равен 0. То есть :nth-of-type(3n) найдет 3-й, 6-й и 9-й элементы, а :nth-of-type(3n+1) найдет 1-й, 4-й и 7-й элементы и т.д.

Можно передавать отрицательные сдвиги. В основе CSS лежит лингвистический язык, не программный, поэтому отсчет начинается с 1, а не с 0. Между множителем a и переменной n не должно быть пробелов, сдвиг идет последним.

С помощью этих числовых псевдоклассов можно определить элементы, не добавляя к ним классы. Самый распространенный пример – таблица, в которой каждая следующая строка слегка темнее, чтобы было удобно читать. Раньше для этого требовалось использовать odd и even на теге tr. Сейчас можно просто применить tr:nth-of-type(odd) для выбора всех нечетных строк и не трогать разметку. Можно пойти еще дальше и разукрасить таблицу тремя цветами: берем tr:nth-of-type(3n), tr:nth-of-type(3n+1) и tr:nth-of-type(3n+2) и применяем разные цвета.

E:first-child — Элемент E, если E – первый ребенок внутри родителя. То же самое что E:nth-child(1).

E:last-child — Элемент E, если E – последний ребенок внутри родителя. То же самое что E:nth-last-child(1).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

:first-of-type — То же что и :nth-of-type(1).

E:last-of-type — То же что и :nth-last-of-type(1).

E:only-child — Элемент E, если E – единственный ребенок внутри родителя.

E:only-of-type — Элемент E, если E – единственный элемент типа E, являющийся прямым ребенком от родителя.

Заметка: child или type

Работая со структурными селекторами nth-of-type и nth-child, важно понять, что такое child и type. Child ищет все дочерние элементы, подпадающие под выражение, а также проверяет предыдущий элемент на совпадение. Type ищет все элементы, совпадающие сначала с первой частью селектора, после чего уже проверяется выражение.

На примере p:nth-child(3n) браузер ищет каждый третий дочерний элемент родителя. Если дочерний элемент p, то совпадение есть, если нет – совпадения нет. В случае с p:nth-of-type(3n) браузер ищет все дочерние теги p родителя, после чего находит каждый третий p.

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

E:empty — Элемент без потомков. Это могут быть текстовые узлы. <p>hello</p> и <p> </p> не подойдут под p:empty, а <p></p> и <p><!— comment —></p> подойдут. Этот селектор также находит пустые элементы типа <br> и <input>. В CSS Selectors Level 4 появится p:blank, который будет находить <p> </p>.

E:lang(en) — Элемент языка, обозначенный двумя буквами, например, en. В отличие от E:[lang|=en], где должен быть атрибут lang, селектор E:lang(en) найдет E, если язык был объявлен на самом элементе или любом родителе.

E:not(exception) — Очень полезный селектор: находит элементы, не подпадающие под селектор в скобках.

Селекторы с псевдоклассом :not находят все, что слева от двоеточия и вычитают элементы справа от двоеточия. Сперва элементы находятся по левой части селектора. Например, p:not(.copyright) найдет все параграфы в документе и только потом уберет из них параграфы с классом copyright. Можно сцепить несколько псевдоклассов :not. input:not([type=checkbox]):not([type=radio]) найдет все теги input на странице за исключением типов checkbox и radio.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Псевдоклассы CSS. Основы

От автора: скорее всего, вы уже знаете некоторые псевдоклассы CSS, такие как: :link, :visited, :hover, :active и :focus. Пройдемся по ним еще раз.

Важно: ключевые моменты

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

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

Чтобы улучшить доступность, добавьте :focus ко всем :hover, так как не все пользователи используют мышь для навигации по сайту.

hover можно применить к любому элементу на странице, а не только к ссылкам и элементам формы.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

focus и active относятся к ссылкам, элементам формы, элементам с редактируемым контентом, а также к любым элементам с атрибутом tabindex.

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

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

enabled — Любой активный элемент интерфейса. Обычно это элемент формы, поддерживающий атрибут disabled, к которому он на данный не применен.

disabled — Наоборот, неактивный элемент интерфейса: элемент формы, поддерживающий атрибут disabled, к которому на данный момент применен данный атрибут.

checked — Для выбранных радиокнопок и отмеченных чекбоксов.

indeterminate — Для элементов формы, которые и не отмечены галкой, и отмечены. Например, если поставить галку во всех чекбоксах в группе, затем снять некоторые галки, то чекбокс «выбрать все» можно установить в состояние indeterminate (с помощью JS), чтобы показать, что этот чекбокс и не отмечен, и не снят.

target — Этот селектор выделяет целевой элемент активного внутристраничного якоря. Это звучит сложнее, чем есть на самом деле: вы уже знаете, что по странице можно использовать якоря с помощью символа # и ID целевого элемента. Например, на вашей странице может быть ссылка «перейти к контенту», по клику на которую вы перепрыгиваете на элемент с ID контента.

Переход по якорю меняет URL на thispage.html#content, а :target теперь совпадает с элементом в документе, контент которого равен ID. Это как если бы вы временно добавили селектор #content. Временно потому, что как только пользователь кликнет на новый якорь, target будет равен новому целевому элементу.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

valid — Применяется к валидным элементам. Валидность определяется по типу, шаблону и другим атрибутам инпута (см. Главу 4).

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

in-range — Применяется к элементам с ограничениями по диапазону, где значение находится в пределах этих ограничений. Применяется, например, к типам инпута date/time, number, range с атрибутами min и max. Если значение равно NULL, то оно попадает в in-range.

out-of-range — Противоположность in-range: применяется к элементам, чье значение выходит за рамки диапазона. Пустое значение не считается выходящим за рамки диапазона.

required — Применяется к элементам формы с установленным атрибутом required.

optional- Применяется к элементам форы без атрибута required.

read-only — Применяется к элементам, контент в которых не должен редактироваться пользователями. К таким элементам относится большая часть элементов, у которых не задан атрибут contenteditable.

read-write — Применяется к элементам, чей контент могут изменять пользователи. Это компоненты contenteditable и записываемые инпуты.

Эти атрибуты поддерживаются в браузерах, которые поддерживают атрибуты в элементах форм. Другими словами, браузеры, поддерживающие required и pattern, также поддерживают связанные с ними псевдоклассы valid и invalid.

IE8 и ниже не поддерживают checked, enabled, disabled и target. Однако данные селекторы поддерживаются в IE9 за исключением user-interface селекторов. IE10 и 11 поддерживают indeterminate, required и optional, но не поддерживают default, in-range, out-of-range, read-only и read-write.

Пока поддержки нет, можно использовать JS-библиотеку Selectivizr для таргетирования этих псевдоклассов в IE.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

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

От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Ранее в этой главе мы уже говорили, что псевдоклассы позволяют задавать стили на основе информации, которую невозможно получить из дерева документа и на которую нельзя сослаться с помощью простых селекторов. К ним относятся логические и лингвистические псевдоклассы типа :not и :lang(), а также псевдоклассы, срабатывающие на пользовательские события, типа :hover и :focus.

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

Выделение фрагментов страницы с помощью :target

Идентификатор фрагмента – это та часть URL, которая идет после символа #. Например, #top или #footnote1. Вы могли их использовать для создания внутренней навигации по странице – так называемые якоря. С помощью :target можно выделить часть документа, относящуюся к этому фрагменту. И тут совсем не нужен JS.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<section> <h3>Comments on this post</h3> <article>…</article> <article>…</article> <article>…</article> </section>

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

У каждого комментария в коде выше есть свой идентификатор фрагмента. То есть на каждый комментарий можно получить прямую ссылку. Например, <a href=»#comment-1146937891″>. Осталось лишь задать стили комментария с помощью псевдокласса :target:

.comment:target { background: #ffeb3b; border-color: #ffc107 }

Когда в URL есть идентификатор фрагмента, ссылающийся на комментарий (например, http://example.com/post/#comment-1146937891), комментарий будет выделяться желтым фоном, как на скриншоте ниже.

С :target можно использовать любые стили, что позволяет создавать вкладки без подключения JS. Craig Buckler подробно описал эту технику в своем уроке «как создать вкладки на чистом CSS3 с помощью селектора :target». Мы немного освежим его способ, добавим чуть больше CSS3 свойств. Во-первых, давайте взглянем на наш HTML:

<div> <div> <a href=»#tab1″>Tab 1</a> <a href=»#tab2″>Tab 2</a> <a href=»#tab3″>Tab 3</a> </div> <ul> <li> <p>This is tab 1.</p> </li> <li> <p>This is tab 2</p> </li> <li> <p>This is tab 3.</p> </li> </ul> </div>

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

[id^=tab] { position: absolute; } [id^=tab]:first-child { z-index: 1; } [id^=tab]:target { z-index: 2; }

А вот тут и кроется вся магия. Наши вкладки имеют абсолютное позиционирование. Дальше мы помещаем первую вкладку на самый верх с помощью z-index: 1. Данное свойство делает первую вкладку видимой по умолчанию. В конце мы добавляем z-index: 1 к нашей целевой вкладке. Так нужная нам вкладка всегда будет лежать поверх остальных. Результат представлен на скриншоте ниже.

Совет: повышение доступности

Для большей доступности можно использовать JS, с помощью которого будет устанавливаться атрибут hidden или aria-hidden=true в зависимости от видимости вкладок.

Клик по вкладке обновляет идентификатор фрагмента в URL, что в свою очередь вызывает состояние :target.

Вычитание селекторов с помощью :not()

Псевдокласс :not(), возможно, самый мощный из новых. Он возвращает все элементы кроме тех, которые указаны в аргументе. Например, p:not(.message) выберет все теги p без класса message.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Псевдокласс :not() также известен как функциональный псевдокласс. Он принимает один аргумент, как функции в других языках программирования. Передаваемый в :not() аргумент должен быть простым селектором: тип элемента, класс, ID или другой псевдокласс. Псевдокласс не сработает, если будет передан составной селектор типа label.checkbox или сложный селектор типа p img.

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

<form method=»post» action=»#»> <h2>Join the Cool Kids Club</h2> <p> <label for=»name»>Name:</label> <input type=»text» name=»name» required> </p> <p> <label for=»email»>Email:</label> <input type=»email» name=»email» required> </p> <fieldset> <legend>Receive a digest?</legend> <p> <input type=»radio» name=»digest»> <label for=»daily»>Daily</label> <input type=»radio» name=»digest»> <label for=»weekly»>Weekly</label> </p> </fieldset> <button type=»submit»>Buy Tickets!</button> </form>

В HTML выше лейблы, относящиеся к типу radio, имеют класс .label-radio. С помощью псевдокласса :not() можно выбрать элементы без класса label-radio, как показано на скриншоте ниже:

label:not(.label-radio) { font-weight: bold; display:block; }

Этот пример поинтереснее. Давайте стилизуем текстовые поля. К таким полям относятся инпуты с типом number, email, text, password и url. Но давайте сделаем это, исключив из выборки радиокнопки, чекбоксы и ползунки. Первое, что может прийти в голову:

([type=radio]), input:not([type=checkbox]), input:not([type=range]) { … }

Но это не сработает, так как каждый селектор будет переписывать предыдущий. Это эквивалент такой записи:

input:not([type=radio]){ … } input:not([type=checkbox]) { … } input:not([type=range]) {… }

Вместо этого необходимо сцепить псевдоклассы :not(), чтобы они все фильтровали поля input.

input:not([type=radio]):not([type=checkbox]):not([type=range]) { … }

Использовать псевдокласс или псевдоэлемент без простого селектора – это то же самое, что использовать его с универсальным селектором. То есть запись :not([type=radio]) равна *:not([type=radio]). В таком случае в выборку попадут все элементы без атрибута type и значения radio, в том числе html и body. Чтобы исключить это, используйте :not() с классом, ID или селектором атрибута. Кстати, это касается и классов, ID и селекторов атрибутов: .warning и [type=radio] равны *.warning и *[type=radio] соответственно.

Спецификация CSS Selectors Level 4 улучшает принцип работы :not(). Теперь он может принимать список аргументов, а не просто селекторы. Вместо сцепки можно использовать запятую в качестве разделителя в аргументе:

input:not([type=radio], [type=checkbox], [type=range]) { … }

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

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля