CSS селекторы

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

Селекторы CSS

Селекторы бывают псевдоклассы и псевдоэлементы. Основное применение селекторов, это добавление стилей для элементов веб-страницы, которые не имеют идентификаторов или классов.

Например, если в таблице HTML семь ячеек, как добавить стиль оформления к каждой третей ячейке сверху в пятом ряду? С помощью селекторов это не составит труда!

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

к меню ↑

Селектор :target

Селектор :target используется для добавления стилей к привязки/сноски/якорь.

Если добавить идентификатор для адресной строки, URL будет таким:

http://www.site.ru/page/#section-1

Этот URL привязан к идентификатору section-1,браузер перейдёт в то место страницы, где расположен элемент с идентификатором section-1.

Для селектора :target в таблице стилей CSS, нужно добавить правила:

:target {
 background-color: yellow;
 color: black;
}

или

p:target {
 background-color: yellow;
 color: black;
}

:target

Для любителей старых браузеров, существует скрипт:

$(document).ready(function() {
  $("p").removeClass("customTarget");
  var myLocation = document.location.hash.replace("#","");
  if (myLocation) {
  document.getElementById(myLocation).className = "customTarget";
  }
  $("a").click(function () {
  $("p").removeClass("customTarget");
  var clickedLink = tdis.href.split("#");
  if (clickedLink.lengtd > 1) {
  document.getElementById(clickedLink[1]).className = "customTarget";
  }
  });
});
к меню ↑

Селекторы :enabled и :disabled

Элементы веб-форм могут быть с двумя свойствами :enabled и :disabled. Из названия селекторов понятно, что это разрешить и запретить.

Теперь селекторы CSS имеют псевдоклассы стилей элементов на основе двух вышеуказанных свойств:

input:enabled {
  background: white;
  border: solid 1px #000;
}
input:disabled {
  background: #ccc;
  border: solid 1px #aaa;
}

Селекторы :enabled и :disabled подсказывают пользователям, какие элементы активны а какие нет. Если для элемента указать значение :disabled (запретить), большинство браузеров автоматически заменят стили для этого элемента. При желании, Вы можете добавить свои собственные стили.

:enabled :disabled

к меню ↑

Селекторы :checked и :indeterminate

Селекторы :checked:indeterminate работают аналогично :enabled и :disabled, отличие в том что :checked для переключателей веб-формы. CSS позволяет добавить стили к элементам веб-формы с помощью селектора :checked:

:checked {
  margin-left: 20px;
}

:checked

Другое свойство для таких элементов это псевдокласс :indeterminate.

к меню ↑

Селекторы “псевдоклассы”

Подробно об этих селекторах Я писал на странице «Псевдоклассы CSS3». Повторюсь: в CSS3 существуют структурные псевдоклассы, которые позволяют выбрать один или несколько элементов в соответствии с их позициями в дереве документа. На первый взгляд эти псевдоклассы могут показаться немного странными:

  • :ntd-child(N)
  • :ntd-last-child(N)
  • :ntd-of-type(N)
  • :ntd-last-of-type(N)

Аргумент N может быть ключевое слово, число, или ряд выражений вида an+b.

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

Если аргумент N является число, то оно представляет порядковый номер выбранного элемента. Например, если аргумент — 5, то в дереве документа будет выбран пятый элемент.

Аргумент N также может быть задан как an+b, где a и b целые числа (например, 5n+3).

  • b — представляет собой порядковый номер первого элемента
  • a — это порядковый номер каждого элемента первого элемента

В примере 5n+3, каждый третий элемент после этого элемента: первый, восьмой, одиннадцатый и так далее…

В примере 4n+6 будет соответствовать и каждый шестой элемент после четвертого элемента: шестой, десятый, четырнадцатый, и так далее…

li:nth-child(4n+6) {
  background: #ccc;
}

Значение ключевого слова odd эквивалентно выражению 2n+1.

Наборы значений для псевдоклассов
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13
4 9 17 20 16 18
5 11 21 24 20 23

:ntd-child()

к меню ↑

Селекторы “псевдоэлементы”

Псевдоэлементы CSS идеально подходят для изменения стиля HTML не исправляя при этом сам код HTML.

к меню ↑

Псевдоэлементы ::first-letter и ::first-line

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

p:first-of-type::first-letter {
  float: left;
  color: goldenrod;
  font-size: 90px;
  line-height: 70px;
  padding-right: 7px;
  font-family: Georgia, serif;
}
p:first-of-type::first-line {
  text-transform: uppercase;
}

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

p:first-of-type::first-line {
  text-transform: uppercase;
}

Chrome не распознает свойство text-transform для псевдоэлемента ::first-line это известный баг.

::first-letter, ::first-line

к меню ↑

Псевдоэлементы :before и :after

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

к меню ↑

Пример псевдоэлемента :before

В этом примере троеточие “…” будет всегда впереди пунктов списка, плюс отступ справа .5em:

li:before {
  content: "… ";
  margin-right: .5em;
}

двойное двоеточие :: только для псевдоэлементов в CSS3. В CSS2.x для псевдоэлементов и псевдоклассов используются одно двоеточие :. Это означает, что в CSS2.x псевдоэлемент такого вида ::before работать не будет!

Псевдоэлемент :after работает аналогично псевдоэлементу :before, отличие только в том, что содержимое псевдоэлемента :after всегда будет после элемента.

к меню ↑

Пример псевдоэлемента :after

В этом примере троеточие “…” будет всегда после пунктов списка, плюс отступ слева .5em:

li:after {
  content: " …";
  margin-left: .5em;
}

Селекторы :before и :after замечательно работают с WebFont Icons. Больше примеров с псевдоэлементами смотрите на странице Сила CSS3

к меню ↑

Псевдокласс :not()

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

к меню ↑

Пример псевдокласса :not()

button:not([disabled]) {
  color: #white;
  }
  :not(div) {
  background: #ccc;
  }

Первый блок применят стиль для всех элементов, которые не имеют атрибут “disabled”. Второй блок применяет стиль ко всем элементам, которые <div>.

к меню ↑

Поддержка селекторов браузерами

Селекторы CSS хорошо поддерживаются браузерами, в том числе IE9+. Проблема с поддержкой селекторов CSS только в старых версиях браузеров Internet Explorer, для них есть скрипт Selectivizr.

к меню ↑

Заключение

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