Селекторы

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

Оглавление:
  1. Виды селекторов
  2. :target
  3. :enabled и :disabled
  4. :checked
  5. Псевдоклассы
  6. Псевдокласс :not()
  7. Псевдоэлементы
  8. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

Виды селекторов

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

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

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

К началу

:target

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

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

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

: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

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

:checked {
  margin-left: 20px;
}

:checked

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

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

  • :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()

К началу

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

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

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

button:not([disabled]) {
  color: white;
}

Применить стиль ко всем элементам в статье, кроме тега <div>.

article > :not(div) {
  background: silver;
}

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

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

Псевдоэлемент :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 был добавлен в CSS2.х, и представляет собой содержимое, которое всегда будет в начале элемента. Дополнительные свойства могут быть указаны в стиле псевдоэлемента.

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

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

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

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

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

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

Селекторы :before и :after замечательно работают с WebFont Icons. Больше примеров с псевдоэлементами смотрите на странице Сила CSS. О селекторах четвертого уровня можно узнать на странице Селекторы CSS путь к CSS4.

К началу

Поддержка

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