Доступ к css-переменным и их изменение с помощью javascript

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

В этом руководстве вы узнаете, что такое псевдокласс :root в CSS и как его можно использовать в проектах.

Псевдокласс :root используется в CSS для выбора родительского элемента самого высокого уровня внутри заданной спецификации. В спецификации HTML :root по сути равен селектору html.

Попробуем продемонстрировать это на примере. В приведенном ниже фрагменте CSS стили :root и html будут делать то же самое:

Если вы заметили, выше мы говорили, что :root по сути эквивалентен селектору html. Однако фактически, селектор :root имеет больше полномочий, чем html. Это происходит потому, что он считается селектором псевдокласса (как, например, :first-child или :hover).

Следовательно, как селектор псевдокласса он имеет больше полномочий, чем селекторы тегов:

Благодаря своей более высокой специфичности селектор :root применяется несмотря на то, что после него идет селектор html.

Псевдокласс :root в разных спецификациях

В спецификации HTML псевдокласс :root нацелен на родительский элемент самого высокого уровня – html.

Поскольку CSS также разработан для SVG и XML, вы можете использовать :root, но он просто будет соответствовать другому элементу.

Например, в SVG родительским элементом самого высокого уровня является тег svg.

Подобно HTML, теги :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.

Практическое использование :root

Итак, каково практическое использование: root? Как мы уже говорили ранее, это безопасная замена селектора html.

Проще говоря, вы можете делать все то, что обычно делаете с помощью селектора html:

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

Дополнительным преимуществом :root по сравнению с html является возможность стилизовать графику SVG.

Если вы хотите узнать о псевдоклассе :root больше, обратитесь к Mozilla Developer Network.

Допустимые значения для пользовательских свойств

У обычного CSS-свойства можно задать только разрешенные по стандарту значения. Согласно стандарту пользовательских свойств, в качестве значения можно использовать любое существующее корректное CSS-значение. Например, как у всех следующих пользовательских свойств:

.element::before {

 —color: rgba(0, 0, 0, 1);

 —hex: #000000;

 —value: 20px;

 —number: 3;

 —text: «Hey, what’s up?»;

 —keyword: currentColor;

}

Для примера зададим рамку с цветом #800080 для кнопки:

button {

 —netologyBrandColor: #800080;

 border-width: 2px;

 border-style: solid;

 border-color: var(—netologyBrandColor);

}

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

button {

 —netologyBrandColor: #800080;

 —buttonBorderColor: var(—netologyBrandColor);

 border-width: 2px;

 border-style: solid;

 border-color: var(—buttonBorderColor);

}

Результат ничем отличается от предыдущего, и у кнопки все так же рамка с цветом #800080.

Если у пользовательского свойства —netologyBrandColor будет некорректное значение для свойства border-color, например 18px, то рамка станет черной.  

button {

 —netologyBrandColor: 18px;  

 —buttonBorderColor: var(—netologyBrandColor);

 border-width: 2px;

 border-style: solid;

 border-color: var(—buttonBorderColor);

}

Дело в том, что прежде чем браузер применит значение пользовательского свойства для встроенного свойства, он проверит его на корректность. Если значение доступно для встроенного свойства, то браузер применит его. А если нет, то установит для встроенного свойства значение по умолчанию.

В нашем случае 18px некорректное значение для встроенного свойства border-color, и поэтому браузер установит значение по умолчанию, т.е currentColor. Это очень легко проверить, задав для свойства color значение #800080:

button {

 —netologyBrandColor: 18px;  

 —buttonBorderColor: var(—netologyBrandColor);

 border-width: 2px;

 border-style: solid;

 border-color: var(—buttonBorderColor);

 color: #800080;

}

Как видим, браузер применил значение #800080 для рамки. В этом примере я использовал полный синтаксис, чтобы установить рамку. Но мы можем использовать краткий, а именно свойство border.

button {

 —netologyBrandColor: 18px;  

 —buttonBorderColor: var(—netologyBrandColor);

 border: 2px solid var(—buttonBorderColor);

 color: #800080;

}

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

В нашем примере у встроенного свойства border в качестве одного из значений установлено пользовательское свойство —buttonBorderColor с некорректным значением 18px. Согласно описанному алгоритму, браузер просто проигнорировал свойство border, поэтому у элемента пропала рамка.

Root css что это

Псевдокласс :root соответствует корневому элементу <html>. Таким образом, селекторы :root и html применяют стиль к одному и тому же элементу <html> .

Тем не менее, между :root и html есть небольшое отличие — у :root приоритет выше, чем у селектора html . Если задать одинаковые стилевые правила для этих селекторов, то стиль :root переопределит стиль html . В примере 1 показана такая ситуация.

Пример 1. Переопределение стиля

В данном примере используется два селектора с одним свойством background-color, но с разными значениями. Поскольку приоритет :root выше, чем у html , то для веб-страницы будет задан зелёный цвет фона.

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

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

Это правило соответствует следующей записи, так как вместо var(—primary-color) подставляется значение переменной —primary-color .

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

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

Пример 2. Переменные в CSS

В данном примере для :root мы определяем несколько переменных, а затем вставляем их в качестве значений.

Браузер Internet Explorer не поддерживает переменные и в нём пример 2 работать не будет.

Let’s recap.

The * selector

• It is a universal selector that selects every element in the html document.
• It can be used to give universal styles to all elements.
• It can also be used to select all descendant elements within a particular element.
• It can be used to create CSS resets.
• It can be overridden by other element styles.

The :root selector

• It is a pseudo-class selector.
• It represents the root parent element of your document.
• It can be either an html, XML, SVG tag, etc depending on what document you are styling with CSS.
• It has a higher specificity than html element selector.
• It is used to declare global variables in CSS.

The html element selector

• It is the root element of an html document.
• It contains 2 child elements being the head and body elements.
• Some styles declared in it are inherited by its descendants and can be overridden by them.
• Only necessary styles should be applied to the html element like the font styles.

The body element selector

• It covers the entire html document viewed in the browser.
• It holds all other elements displayed in the web browser.
• It’s better to declare styles in the body than in the html.

Whew, you made it up to the end of this article. Thank You. I do hope you by now understand the difference between the * selector, the : root selector, the html element selector and the body element selector and how to use them. If you did please lemme know in the comment section and do leave your reactions down below.

Till next time guys. Byeee!

Connect with me on

If you like my notes and would like to support me, you can buy me coffee. I love the taste of coffee.

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

Последнее обновление: 21.04.2016

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

Список доступных псевдоклассов:

• :root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице
  корневым элементом практически всегда является элемент

• :link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход

• :visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил

• :active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход

• :hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться
  и к другим элементам, например, к параграфам

• :focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши
  на поле ввода (например, текстовое поле)

• :not: позволяет исключить элементы из списка элементов, к которым применяется стиль

• :lang: стилизует элементы на основании значения атрибута

• :empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            a:link    {color:blue; text-decoration:none}
            a:visited {color:pink; text-decoration:none}
            a:hover   {color:red; text-decoration:underline}
            a:active  {color:yellow; text-decoration:underline}
			input:hover {border:2px solid red;}
        </style>
    </head>
    <body>
        <a href="index.html">Учебник по CSS3</a>
		<input type="text" />
    </body>
</html>

Селектор :not

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:not(.blueLink) { color: red; }
        </style>
    </head>
    <body>
		<a>Первая ссылка</a><br/>
		<a class="blueLink">Вторая ссылка</a><br/>
		<a>Третья ссылка</a>
    </body>
</html>

Селектор применяет стиль ко всем ссылкам за исключением тех, которые имеют класс «blueLink». В скобки псевдоклассу
not передается селектор элементов, которые надо исключить.

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :lang(ru) {
				color: red;
			}
        </style>
    </head>
    <body>
		<form>
			<p lang="ru-RU">Я изучаю CSS3</p>
			<p lang="en-US">I study CSS3</p>
            <p lang="de-DE">Ich lerne CSS3</p>
        </form>
    </body>
</html>

НазадВперед

Вернёмся к button-var

Как ты уже понял, класс работает совместно с css-переменными. Суффикс как раз на это указывает. Данный класс принимает несколько переменных.

• — фон кнопки
• — фон кнопки при наведении
• — цвет кнопки при наведении
• — радиус скругления углов
• — цвет тени при фокусе кнопки
• — цвет текста
• — выравнивание текста

<a class="button button-var" href="#" style="--bg: transparent; --hover-bg: #ffffff; --hover-color: #111111; --radius: 7px; --focus-shadow: #ffffff; border: 2px solid white;">Download</a>

То есть с помощью css-переменных в Berry CSS можно настраивать разные классы. Посмотри ещё примеры кнопок, сделанных с помощью .

Зачем это вообще нужно? Ответ прост: невозможно предусмотреть все варианты оформления, которые могут понадобиться при вёрстке. А если попытаться это сделать в виде классов, то их количество будет очень большим, а итоговый css-код превысит разумные пределы. Именно поэтому часть свойств использует переменные, которые можно переопределить глобально через , либо локально — через используемого блока.

В Berry CSS классы, которые могут настраиваться подобным образом, как правило, имеют суффикс , чтобы выделяться. Вот некоторые:

• — для задания позиции фона:
• — бордюр:
• — скругление:
• и — ширина wrap-блока:
• и т.д.

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

The :root selector

:root on the other hand is a pseudo-class selector. It selects and represents the root element of your document, i.e. the highest-ranking parent element of your document, in our case the html element.

You might think that the html element selector and :root selector are the same because they both represent the root parent element but they are not.

Remember I said the :root selector targets the root element of your document, the keyword being document. This means that your document doesn’t necessarily have to be your HTML document, it could also be an XML document, XHTML document or any other document you want to apply CSS style on. And thus the parent element of these files will be the one targeted when you use the :root selector. That is the html element, xml element and xhtml element respectively.

This also means that when using the :root selector and html element selector for example to apply a style, the style in the :root selector will have a higher specificity than the style in the html element selector as seen in the example below.

Enter fullscreen modeExit fullscreen mode

You will see that the background color is red instead of green.

The :root selector is also used to declare global variables. Variables in CSS are reusable styles. For example, you have a specific hex code that you want to use as the color for a particular set of elements, instead of memorizing the hex color and entering it one by one on each CSS selector, you can just define it in your :root and then call it in each CSS selector. Then when you decide you don’t like the color again, you can change it in the :root instead of manually going through all the CSS selectors one by one that you had used it in. This makes it easier to manage repeated styles. (You can read more on variables in my previous note.)

Enter fullscreen modeExit fullscreen mode

All h2 element and p element in your page will receive the hex color of #ff0000 and #00ff00 respectively.

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

Итак, предположим, у нас на сайте есть блок, внутри которого расположены другие элементы. Это могут быть отдельные блоки, пункты списка, абзацы, ссылки и так далее.

Если нам нужно каким-то образом изменить оформление первого элемента внутри этого блока, то мы можем использовать псевдокласс first-child.
Давайте разберём пример с таким кодом страницы:

PHP

<div class=»iw-blocks»>
<div class=»block»>
Январь
</div>
<div class=»block»>
Февраль
</div>
<div class=»block» lang=»en»>
March
</div>
…
<div class=»block»>
Декабрь
</div>
</div>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class=»iw-blocks»> <div class=»block»> Январь <div> <div class=»block»> Февраль <div> <div class=»block»lang=»en»> March <div> … <div class=»block»> Декабрь <div> <div> <div>

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

Чтобы дописать CSS свойства только для первого элемента нам нужно:

1. 1.Сначала указываем класс или идентификатор родительского блока, того элемента, к которому нам нужно обратиться. В данном случае это класс iw-blocks.
2. 2.Далее пишем тег или класс одного из нескольких повторяющихся элементов. В данном случае у нас повторяются несколько блоков с классом block. Поэтому мы можем использовать либо название класса, либо же просто написать тег div.
3. 3.Через двоеточие пишем название псевдокласса CSS, которое мы будем использовать::first-child

4. 4.В фигурных скобках зададим ему CSS-свойства. Например, изменим цвет фона и цвет текста.

   PHP

   .iw-blocks .block:first-child {
   background:#034B85;
   color:#fff;
   }

   1 2 3 4

   .iw-blocks.blockfirst-child{ background#034B85; color#fff; }

После сохранения изменений и обновления страницы дописанные CSS-свойства сработают только для первого блока с классом block.

Бывают ситуации, когда нам нужно обратиться к элементу, стоящему внутри блока, к которому мы применяем псевдокласс.

PHP

<div class=»iw-blocks»>
<div class=»block»>
<p>Декабрь</p>
<p>Январь</p>
<p>Февраль</p>
</div>
…
</div>

1 2 3 4 5 6 7 8

<div class=»iw-blocks»> <div class=»block»> <p>Декабрь<p> <p>Январь<p> <p>Февраль<p> <div> … <div>

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

PHP

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

1 2 3

.iw-blocks.blockfirst-childp{ background#ccc; }

Также вместо :first-child мы можем использовать любой из указанных ниже псевдоклассов CSS.

:nth-last-child – применяет стили для последнего дочернего элемента.

Например:

PHP

<ul class=”my-list”>
<li>Январь</li>
<li>Февраль</li>
<li>Март</li>
</ul>

1 2 3 4 5

<ul class=”my-list”> <li>Январь<li> <li>Февраль<li> <li>Март<li> <ul>

CSS:

PHP

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

1 2 3

.my-listlilast-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 работает механизм наследования, который позволяет элементам наследовать свойства у родительских элементов. В этом плане пользовательские свойства ничем не отличаются от них. Для примера я напишу код, в котором пользовательское свойство —netologyBrandColor наследуется от родительского элемента body.

body {

 —netologyBrandColor: #800080;

}

button {

 border: 2px solid var(—netologyBrandColor);

 color: var(—netologyBrandColor);

}

Посмотрев в инспектор, можно заметить надпись “Inherited from body”, которая показывает нам, что пользовательское свойство было взято из элемента body. Но если для элемента button добавить пользовательское свойство —netologyBrandColor, то оно уже перекроет свойство из элемента body.

body {

 —netologyBrandColor: #800080;

}

button {

 —netologyBrandColor: #27ae60;

 border: 2px solid var(—netologyBrandColor);

 color: var(—netologyBrandColor);

}

В инспекторе видно, что пользовательское свойство —netologyBrandColor у элемента button переопределило свойство —netologyBrandColor, которое мы указали для элемента body.

Ответы

В1. Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?

Ответ Чтобы отобрать элемент, у которого установлен атрибут disabled, нужно использовать селекторы атрибутов.

В2. Как я могу установить непрозрачность для элемента span, который следует прямо за элементом input?

Ответ Нужно использовать смежный (+).

В3. Как можно установить непрозрачность для элемента input, у которого установлен атрибут type со значением «radio».

Ответ Чтобы отобрать элемент с type=»radio» требуется использовать селекторы атрибутов.

В4. Есть фрагмент кода. Скажите сколько элементов с пурпурным фоном будет в первом и во втором случае.

случай 1

случай 2

Ответ В первом случае один элемент, а во втором — 2.

В5. Что такое псевдокласс :root?

Ответ :root — псевдокласс, которые отбирает корневой элемент в дереве документа. В случае HTML документа это элемент html. В случае SVG документа это элемент svg.

В6. Как работает псевдокласс :placeholder-shown?

Ответ Псевдокласс :placeholder-shown срабатывает, когда у элементов input или textarea отображается placeholder. Если пользователь начинает ввод текста, то placeholder скрывается, и поэтому псевдокласс :placeholder-shown не применяется.

В7. Изучите следующий фрагмент кода и назовите 2 способа переписать его без потери внешнего результата, чтобы в CSS осталось только одно правило

Ответ Первый способ это заменить margin-right на the margin-left и использовать псевдокласс :nth-child.

Второй способ это использовать псевдоклассы :not() и:last-child, чтобы задать margin-right.

В8. Как я могу задать CSS для элемента, в котором есть элемент, находящийся в фокусе?

Ответ Нужно использовать псевдокласс :focus-within.

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

Ответ Нужно использовать сложный селектор. Первая часть tbody:hover нужна, чтобы установить opacity для всех строк. Вторая часть чтобы opacity не применялось на наведенную строку, нужно использовать :not(:hover).

В10. Как можно установить цвет фона для элемента button, когда URL страницы содержит хэш #somehash? Для ответа на вопрос, исследуйте следующий код.

Ответ Нужно использовать псевдокласс :target.