You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- [Defining Custom Properties: the `--*` family of properties](#defining-custom-properties-the----family-of-properties)
19
-
- [Using Cascading Variables: the `var()` notation](#using-cascading-variables-the-var-notation)
18
+
- [Defining Custom Properties with `--*`](#defining-custom-properties-with---)
19
+
- [Using Variables/Custom Properties with `var()`](#using-variables-custom-properties-with-var)
20
20
-[Features](#features)
21
21
- [At-rules like `@media`, `@support`, etc.](#at-rules-like-media-support-etc)
22
22
- [Pseudo-classes and Elements](#pseudo-classes-and-elements)
@@ -62,11 +62,11 @@ console.log(output);
62
62
63
63
# Syntax
64
64
65
-
### Defining Custom Properties: the`--*` family of properties
65
+
### Defining Custom Properties with`--*`
66
66
67
-
A [custom property](http://dev.w3.org/csswg/css-variables/#defining-variables) is any property whose name starts with two dashes (U+002D HYPHEN-MINUS). A property must be in a rule.
67
+
A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS). A property must be in a rule.
68
68
69
-
You may declare them in a special `:root`selector that represents the root DOM node.
69
+
*Note: `:root` is nothing more than the selector for the root DOM node.*
70
70
71
71
```css
72
72
:root {
@@ -75,7 +75,7 @@ You may declare them in a special `:root` selector that represents the root DOM
75
75
}
76
76
```
77
77
78
-
You may also declare them in a normal selector.
78
+
You may also declare custom properties in a normal selector. Any other selector like `.class`, `#id`, or even `#foo ~ .bar > span.baz` works.
79
79
80
80
```css
81
81
.foo {
@@ -103,9 +103,7 @@ A custom property can be declared multiple times, but only the last one takes pr
103
103
104
104
*[W3C Draft: CSS Custom Properties for Cascading Variables, section 2](http://dev.w3.org/csswg/css-variables/#defining-variables)*
105
105
106
-
### Using Cascading Variables: the `var()` notation
107
-
108
-
You can use a CSS variable with [`var(--variable-name)`](http://dev.w3.org/csswg/css-variables/#using-variables).
106
+
### Using Variables/Custom Properties with `var()`
0 commit comments