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

Содержание

Псевдокласс :not | CSS | WebReference

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

Синтаксис ?

Селектор:not(<Селектор>) { ... }

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
   input:not([type="submit"]) {
    border: 1px solid #ccc;
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p>Ваше имя: <input name="user"></p>
   <p>Прилагаемый файл: <input type="file" name="file"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере стиль применяется ко всем элементам <input> за исключением того, в параметрах которого установлено type="submit" (кнопка «Отправить»). Результат примера показан на рис. 1.

Результат использования псевдокласса :not

Рис. 1. Результат использования псевдокласса :not

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Псевдоклассы 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? | Impuls-Web.ru

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

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

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

Идея использования псевдоклассов заключается в том, что мы можем в 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

<div>

<div>

<p>Декабрь</p>

<p>Январь</p>

<p>Февраль</p>

</div>

</div>

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

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

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

<ul class=”my-list”>

<li>Январь</li>

<li>Февраль</li>

<li>Март</li>

</ul>

CSS:

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

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

<div lang="en">

Example text

</div>

CSS:

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

.text:lang(en) {

background:#ccc;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

<p>Абзац 1</p>

<p>Абзац 2</p>

<p class = "p3">Абзац 3</p>

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

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

p:not(.p3){

color: green;

}

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

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

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

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

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

Узнать подробнее

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

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

p:not(:nth-of-type(3)){

color: green;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее Как работает в CSS псевдокласс not

PSD to HTML

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

Смотреть

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

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

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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).

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

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

Изучите курс и узнайте, как верстать современные сайты на 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.

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

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

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

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

PSD to HTML

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

Смотреть

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

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

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

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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 будет равен новому целевому элементу.

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

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

Изучите курс и узнайте, как верстать современные сайты на 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.

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

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

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

Узнать подробнее Псевдоклассы CSS. Основы

PSD to HTML

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

Смотреть

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

<section>

<h3>Comments on this post</h3>

<article>...</article>

<article>...</article>

<article>...</article>

</section>

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

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

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

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

.comment:target {

  background: #ffeb3b;

  border-color: #ffc107

}

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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

[id^=tab] {

    position: absolute;

}

[id^=tab]:first-child {

    z-index: 1;

}

[id^=tab]:target {

    z-index: 2;

}

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

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

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

label:not(.label-radio) {

  font-weight: bold;

  display:block;  

}

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

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

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

([type=radio]),

input:not([type=checkbox]),

input:not([type=range]) {

  ...

}

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

input:not([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]) { ... }

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]) { ... }

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

...

}

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

Автор: Tiffany Brown

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

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

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

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

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

Узнать подробнее Псевдоклассы CSS: :not и :target

PSD to HTML

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

Смотреть

Отправить ответ

avatar
  Подписаться  
Уведомление о