Псевдоклассы 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 id="target"><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="без стиля" class="izo">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 стиль присваивается всем элементам, кроме того, который содержит class="izo" в первом случае или 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>

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.