Заметки об основах CSS – Селекторы

Общие сведения

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

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

Стили которые назначаются элементу можно разделить на группы:

• стили отвечающие за оформления текста;
• стили отвечающие за блочную модель, это размеры и отступы (могут задавать высоту height, ширину width, внешние margin и внутренние отступы padding, а также тип блока block);
• стили отвечающие за позиционирование элементов (position, top, right, bottom, left, z-index);
• стили отвечающие за управление потоком (создание сеток float, clear);
• декоративные: цвета, фон, тени (background, border);
• анимация и динамические эффекты;
• другие.

Относительные значение

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

Комбинирование правил (контекстные селекторы)

Пример:  .promo a { color: red;}  – этот селектор означает: выберите все элементы с тегом а у которых есть класс “promo”. Но при этом есть ссылка вложена, в что-то где нет родителям не присвоен класс “promo”, то такие ссылки не выберутся.

Считается что оптимальным является выбор на два максимум три уровня вложенности. Более глубокие уровни лучше не выбирать.

Наследование

При этом стоит отметить, что в CSS есть наследование — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства. Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее. Плюс такого поведения, что если мы что-то явно не переопределили, то оно получит такой же стиль, что и у родительских элементов, однако стоит отметить, что не все свойства наследуются.

Наследуемыми являются только свойства: font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction, а также list-style, cursor, visibility, border-collapse (которые используются реже) и т.п.
Полный список свойств можно посмотреть на сайте http://www.w3.org/TR/CSS21/propidx.html в колонке Inherited напротив них стоит значение “yes”. Такие свойства можно и нужно задавать через предков следуя смыслу документа.

Не наследуемые свойства (примерами таких свойств могут быть границы и отступы, а также фоновые цвета): background, border, padding, margin, width, height, position и т.п.

Для любого свойства может быть принудительно установлено значение “inherit” для того, что бы принудительно заставить элемент наследовать значение свойства от родителя.
p {background: inherit;}

Порядок применение и важность селекторов

Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). Среди этих свойств могут быть и конфликтующие между собой. Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.

Имеется три основных момента, которые управляют порядком, в котором применяются CSS-свойства:

• важность;
• специфичность;
• порядок исходного кода.

Пускай есть некоторый HTML и CSS код:

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

Пример специфичности:

Здесь абзац станет красным, так как селектор “p.red” более специфичен, то есть он потенциально выберет меньше элементов (указан более точно). При этом селектор с идентификатором на порядок специфичный чем все остальные.

Здесь стоит отметить, что стили прописанные непосредственно в теге, через атрибут style, обладают наивысшим приоритетом. Хотя такой прием и не рекомендуется в верстке сайтов.
Также существует ключевое слово !important, которое задает свойству наивысший приоритет (записывается в конце после значения свойства перед точкой с запятой). Этот прием также не рекомендуется к частому использованию, потому, что его в последствии сложно перебить каким либо другим свойством.

Однако для специфичности существует правила ее расчета: для селектора вычисляется гурпы значений a,b,c,d (значение а, значение b и т.д.), эти значение вычисляются по следующим правилам:

• При этом если стиль встроенный то a=1 иначе 0;
• значение b равно количеству идентификаторов в селекторе (выражений которые начинаются с символа “#”);
• значение с равно количеству классов, псевдоклассов и селекторов атрибутов;
• значение d равно количеству типов элементов и псевдо-элементов;

Далее значение сводиться к числу обычно десятичному, которое и определяет специфичность селектора, селектор с большей специфичностью имеет больший приоритет.
Например, для следующего списка наибольший приоритет будет иметь “#floor .cat-in-box”:

Селектор	a, b, c, d	Число
span	0, 0, 0, 1	1
div .cat-in-box	0, 0, 1, 1	11
#floor .cat-in-box	0, 1, 1, 0	110
div span	0, 0, 0, 2	2
.cat-in-box	0, 0, 1, 0	10
#floor span	0, 1, 0, 1	101

Селекторы

• Селектор все (*)

  Данный селектор определяет свойство для всех элементов страницы

• Селектор тега (правильнее селектор типа X)

  Обычный селектор, выбирающий все указанные теги, записывается следующим образом: li { background:white; } Если данное правило необходимо применить ко множеству тегов, то теги записываются через запятую: li, p { background:white; } в этом случае фон будет всех абзацев так и у всех элементов списков. Однако стоить заметить, что данное поведение будет только при отсутствии других стилей, которые могут взаимодействовать с данными и перекрыть свойства.

• Селектор класса .X

  Если некоторому тегу на странице назначен атрибут class то можно выбрать все теги с этим значением данного атрибута. То есть следующий селектор обирает элементы по именам их классов (Имена классов могут состоять из латинских букв, цифр, знаков “-” и “_”, но начинаться могут только с буквы): .first { background:white; } Так же как и в случае селекторов с тегами их можно перечислить, для экономии места.

• Селектор потомка (X Y)

  Селекторы могут быть вложенными, в этом случае селектор состоит из нескольких частей разделенных пробелами, такие селекторы еще называют контекстными, их используют для того, что бы применить стили к элементу, только если он вложен в нужный элемент. ul .first { background:white; } – в этом случае правило будет применено к элементу который находиться внутри тэга ul (на любом уровне вложенности, все равно в скольких других тэгах) и ему назначен класс “first”.

• Селектор класса (X + Y)

  Существует способ выбирать соседние элементы (то есть расположенные рядом), например теги li являются соседними по отношению к друг другу и вложены в тег ul. Для выбора соседних элементов используется символ “+”, например “селектор1 + селектор2”. Правило применяется к тегу подходящему под “селектор2” только если рядом с ним есть тег подходящий под правило заданное селектором “селектор1”. .fourth + li { background:white; }

  Селекторы можно комбинировать. Например селектор “.player .hit + .miss” сработает для некоторого тэга которому назначен класс “miss”, если рядом с ним, есть тэг которому назначен класс “hit” и если они оба вложены во внутрь класса которому назначен класс “player”.

• Селектор прямого потомка (X > Y)

  Также есть способ обратиться именно к дочерним (то есть непосредственно вложенным элементам), для этого применяется символ “>”. Например: ul > li { background:white; } – будет применен ко всем тегам li которые непосредственно вложены в тег ul. При этом стоит отметить, что от простого вложенного селектора он отличается тем, что выберет только элементы следующего уровня вложенности, а не пойдет искать элементы до бесконечности.

• Селектор родственный “сестринский” (X ~ Y)

  Выбирает все Y теги следующие за X, для этого используется символ “~”. Например: ul ~ li { background:white; } – будет применен ко всем тегам li которые следуют за ul. Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам p, располагающихся после заголовка h1. При этом h1 и p должны иметь общего родителя, так что если p вставить внутрь div, то стили применяться уже не будут.

• Селектор атрибута (X[правило])

  Селектор атрибутов позволяет выбирать элемент имеющий атрибуты с установленными значениями, для этого имя атрибута и его значение записывается в квадратных скобка (не по имени класса, а действительно по имеющимся у них атрибутам). Наиболее частым использование этого селектора является установка стилей для тега input, который имеет различные типы элементов ввода.
  input[checked] { background:yellow; } input[type="text"] { background:red; } в этом примере для выбранного чекбокса фон станет желтым, а все текстовые поля ввода, будут иметь красный фон.

  CSS

  input[required] { background: #fcf8e3; } input[type="password"] { background:#f2dede; } input[type="submit"] { border-color: green; }

  1 2 3

  input[required] { background: #fcf8e3; } input[type="password"] { background:#f2dede; } input[type="submit"] { border-color: green; }

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

  • tr[class^="column-"] – выберет все теги tr у которых есть атрибут class и его значение начинается со строки “column-” с учетом регистра (при этом может быть использован не только атрибут class но и любой другой).
  • tr[class$=".pdf"] – выберет все теги tr у которых значения атрибута заканчивается строкой “.pdf” с учетом регистра.
  • tr[class*="person"] – выберет все теги tr у которых значения атрибута содержит подстроку “person” на любой позиции с учетом регистра.
  • tr[class~="person"] – выберет все теги tr у которых значения атрибута содержит слово “person” на любой позиции с учетом регистра, при этом входить должно именно слово, то есть оно или в начале/конце строки и отделено от других разделителем (пробелом).
  • tr[class|="block"] – выберет все теги tr у которых значения имени класса или идентификатора содержит слово “block” на любой позиции с учетом регистра, при этом входить должно именно слово, то есть оно или в начале/конце строки и отделено от других разделителем тире “-“.

• Селектор идентификатора (#X)

  Селектор по идентификатору элемента (по ID) для этого перед именем идентификатора записывают символ “#”, такой селектор выберет только один элемент на странице (так как идентификатор должен быть уникален). Крайне не рекомендуется к использованию, кроме редких исключений (например оживление слайдера на странице). Само имя идентификатор а имеет ограничения аналогичные имени класса.

  CSS

  #fullname{ background-color: #fcf8e3; } #year{ width: 100px; }

  1 2 3 4 5 6 7

  #fullname{     background-color: #fcf8e3; }   #year{ width: 100px;   }

• Псевдокласс :root (только CSS3) – определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу html :root{background:#339933;}

В CSS для селекторов существует операция объединения, в этом случае задается перечень селекторов которым тег должен удовлетворять одновременно. Для этого селекторы пишутся без проблема между ними. Например тэг может иметь несколько классов:
li:first-child.heart{ background:#339933;}

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

Псевдокласс – добавляется к селектору с помощью специального символа “:” и позволяет уточнить действие селектора.

• Примерами пседоклассов являются “first-child” и “last-child” позволяющие выбрать первый и последний дочерний элементы соответственно. li:last-child { background:white; } – выберет последний элемент в списке.
• Псевдокласс :nth-child(выражение) – позволяет выбрать элементы по указанному порядковому номеру, причем номер может быть задан в виде формулы. li:nth-child(2) { background:white; } – выберет второй элемент в списке. При этом выражение может быть значениями even – четное,odd – не четные, число – это порядковый номер, или выражение вида an+b, где n – счетчик принимающий значения от 0 и до последнего элемента. Псевдокласс :nth-child, означачает выбрать элемент, если: Этот элемент соотвествует указанному тегу (классу) и он соотвествующий порядковый номер в родительском контейнере (если одно из условий не выполняеться, то селектор ничего не выберет);
• Псевдокласс :nth-last-child(выражение) – позволяет выбрать элементы по указанному порядковому номеру, причем номер может быть задан в виде формулы, но отсчет элементов идет не от первого, а от последнего (как бы в обратном порядке). li:nth-child(2) { background:white; } – выберет предпоследний элемент в списке.При этом выражение может быть значениями even – четное,odd – не четные, число – это порядковый номер, или выражение вида an+b, где n – счетчик принимающий значения от 0 и до последнего элемента
• Псевдоклассы “first-of-type” и “last-of-type” позволяющие выбрать первый и последний дочерний элементы данного типа соответственно. div:first-of-type { background:white; } – выберет первый элемент div который есть у родительского элемента. К примеру, добавление :first-of-type к селектору TD устанавливает стиль для всех первых ячеек, поскольку родителем для тега td выступает тег tr.
• Псевдокласс :nth-of-type(выражение) – позволяет выбрать элементы данного типа по указанному порядковому номеру, причем номер может быть задан в виде формулы. div:nth-of-type(2) { background:white; } – выберет второй div элемент который вложен в родительский контейнер.При этом выражение может быть значениями even – четное,odd – не четные, число – это порядковый номер, или выражение вида an+b, где n – счетчик принимающий значения от 0 и до последнего элемента; Уточнение, например два селектора:  ul:nth-child(2) { } ul:nth-of-type(2) { }  –  первый cелектор выберет второй по счёту дочерний элемент и этот элемент должен быть ul, а второй селектор выберет второй по счету ul среди дочерних ul.
• Псевдокласс :nth-last-of-type(выражение) – позволяет выбрать элементы данного типа по указанному порядковому номеру, причем номер может быть задан в виде формулы, но отсчет элементов идет не от первого, а от последнего (как бы в обратном порядке). div:nth-last-of-type(2) { background:white; } – выберет второй с конца div элемент который вложен в родительский контейнер.При этом выражение может быть значениями even – четное,odd – не четные, число – это порядковый номер, или выражение вида an+b, где n – счетчик принимающий значения от 0 и до последнего элемента
• Псевдокласс :only-child – применяется к дочернему элементу, только если он единственный у родителя. Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).
• Псевдокласс :only-of-type – применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогичен использованию :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).
• Псевдокласс :hover – позволяет выбирать элементы которые взаимодействуют с пользователем, а именно позволяет задать стиль по наведению мыши. li:hover { background:red; } – при наведении мыши на элемент списка он становиться красным. Еще одним примером применения данного селектора является создание динамически отображаемых пунктов меню:
  
  CSS

  li.top ul.submenu { display: none; } li.top:hover ul.submenu { display: block; }

  1 2 3 4 5 6 7

  li.top ul.submenu {   display: none; }   li.top:hover ul.submenu {   display: block; }

  Данные правила скрывают список подпунктов, но показывают его при на ведении мыши на родительский пункт меню. При этом стоить заметить одну интересную особенность, если мышка уходит с данного пункта, то все возвращается к состоянию как было до наведения мыши на пункт (то есть нет специального правила скрыть, есть только состояние скрыто по умолчанию и открыть при наведении).
• Псевдоклассы :link, :visited и :active. :link – выбирает ещё не посещённые ссылки. :visited – выбирает посещённые ссылки. :active выбирает активные ссылки (кнопка мыши зажата на ссылке).
  a:link { background:red; } a:visited { background:yellow; } a:hover { background:blue; } a:active { background:black; } Важен порядок следования правил, в другом порядке не все правила будут работать. При этом все еще не посещенные ссылки будут красными, все посещенные желтыми, при наведении мышью ссылка синеет, а при нажатии до момента ее отпускания ссылка станет черной.
• Псевдокласс :focus – позволяет выбрать элемент который сейчас находиться в фокусе ввода, например это может быть текстовое поле. При переключении по странице клавишей табуляции в фокус также будут попадать ссылки.
  form input:focus {border-color: #0088cc;}
• Псевдокласс :not – это селектор отрицания, позволяющий выбрать элементы не содержащие указанный селектор. Пример:  li:not(:empty)  – выберет все не пустые элементы li.
  li:not(:last-child) {background: inherit;} – назначит стиль всем тегам которые не являются последними у их родителей. Однако у этого отрицания есть ограничения в его работе:
  • не выполниться двойное отрицание типа :not(:not(...)) – это ошибка записи;
  • не сработает объединение селекторов li:not(.heart.jack) – это не корректный селектор;
  • нельзя выбирать псевдо-элементы, например li:not(::after)- не работает;
  • нельзя использовать селекторы по потомкам, групповые селекторы или комбинации li:not(a span)или li:not(a + span)- это все не работает.

  Однако сами псевдоклассы :not можно объединять: li:not(:last-child):not(:first-child) {background: inherit;}

• Псевдокласс :empty – выбирает пустые элементы, при этом элемент не должен содержать ни дочерних элементов ни текста ни пробела К примеру, <p></p> является пустым элементов, а <p> </p>, <p>&nbsp;</p> или <p>эге</p> уже нет. .
• Псевдокласс :checked – элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега input или пользователем.
• Псевдокласс :indeterminate – задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true.
• Псевдоклассы :enabled, :disabled – используется для применения стиля к доступным или заблокированным элементам форм. Такие элементы если они
  заблокированы то не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст.
• Псевдоклассы :valid, :invalid – Применяется к полям формы, содержимое которых соответствует valid или не соответствуют invalid указанному типу. Например, для type=”number” должно вводиться число, а не буквы, для type=”email” корректный адрес электронной почты.
• Псевдоклассы :optional и :required – применяет стилевые правила к тегу input, в зависимости от значения атрибута required. Он позволяет выделять поля обязательные или не обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы, а :required к обязательным.
• Псевдоклассы :read-only и :read-write – применяет стилевые правила к тегу input, в зависимости от значения атрибута readonly. Он позволяет выделять поля доступные или не доступные для изменения. Таким образом :read-only применяется к не редактируемым полям формы, а :read-write к изменяемым. Аналоги:  input[readonly] {} /* аналог :read-only */ input:not([readonly]) {} /* аналог :read-write */ .
• Псевдоклассы :in-range и :out-of-range – описывает поле формы в случае, когда введенное значение поля находится в диапазоне возможных значений для этого поля, заданного атрибутами min и max для тега input. Он позволяет выделять поля в диапазоне и вне его. Таким образом :in-range применяется к значениям в диапазоне, а :out-of-range – вне его.
• Псевдокласс :first-letter – определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
• Псевдокласс :first-line – задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
• Псевдокласс :target – применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
• Псевдокласс :lang(язык) – Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. q:lang(de) { quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */} q:lang(en) { quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ }
• Псевдокласс :default – применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.

Воозможно комбинирование селекторов, как в примере:  input[type="checkbox"]:required:checked {} .

Благодаря селектору :checked, с помощью чистого CSS можно создавать очень много интересных эффектов, так как мы можем не просто выбирать отмеченные поля форм, но и влиять с помощью этих полей на другие элементы. Для этого нам нужно комбинировать :checked и ~, который позволяет выбрать все элементы, идущие за отмеченным полем. Пример: input:checked ~ .item { color: red; }  –  задаст красный цвет, всем элементам с классом item, расположенным после отмеченного поля. Получается, что мы можем с помощью чекбоксов или радиобаттонов управлять внешним видом других элементов. С помощью этого приёма, например, делают переключающиеся вкладки, которые работают без JavaScript.

Псевдоэлементы и их псевдоклассы

• Псевдоэлемент::after – Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content. Для ::after характерны следующие особенности: При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. При добавлении ::after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. .header::after { content: "пример" } – добавит после тега с классом header текст “пример”
• Псевдоэлемент::before – применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Псевдоэлемент работает совместно со свойством content. Для :before характерны следующие особенности: При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  :before наследует стиль от элемента, к которому он добавляется. .header::before { content: "пример" } – добавит перед тегом с классом header текст “пример”
• Псевдоэлемент::first-letter (только CSS3) – определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
• Псевдоэлемент::first-line (только CSS3) – задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
• Псевдоэлемент::selection (только CSS3, в Firefox имеет название ::-moz-selection.) – применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

Псевдоэлементы before и after можно использовать одновременно. Это означает, что с помощью CSS вы можете добавить к любому элементу на странице два псевдоэлемента. В старом варианте стандарта псевдоэлементы можно было использовать с :. Поэтому запись с : понимают и очень старые браузеры. Но сейчас использовать одинарное двоеточие для псевдоэлементов считается дурным тоном.

Функции attr и calc

Функция calc()

Функция calc() – Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% – 20px. Если значение не может быть вычислено, оно игнорируется. Имеет синтаксис свойство: calc(выражение), где Выражение представляет собой комбинацию значений размеров и следующих знаков математических действий.

• + — сложение (width: calc(20px + 20px));
• – — вычитание (padding: calc(10% – 10px););
• * — умножение (height: calc(20%*2);)
• / — деление. На ноль делить запрещено (width: calc(100%/3);).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.

В данном примере задаётся положение фонового рисунка как 20 пикселов от правого края.

Функция attr()

Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета. Синтаксис в CSS2 attr(имя_атрибута), в CSS3 attr(имя_атрибута, <тип>, <значение>), где имя_атрибута – Имя атрибута элемента передаваемое в CSS, <тип>
– Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др; <значение> – Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.
Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.

В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.

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

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

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

Пример:
<a class="button button-send">Отправить</a> – кнопке назначен базовый стиль “кнопка”, а потом уточняющий стиль “кнопка-отправки”, который например меняет цвет кнопки.