Home > Developer > JavaScript
New CSS selector usage and CSS selector usage
Previous
Now, pre-processors (such as sass) seem to have become the standard for CSS development, just as jQuery was the standard for JS development a few years ago. The querySelector of JS draws on jQuery's selector idea, and CSS selector also draws on common functions such as variable definition, selector nesting, and code block reuse of the pre-processor. This article will introduce in detail the new usage of the CSS Selector
Variable
Generally, we have a set of variable definition specifications during web development. take sass as an example, as shown below:
// Color definition specification $ color-background: #222 $ color-background-d: rgba (0, 0, 0, 0.3) $ color-highlight-background: #333 // font definition specification $ font-size-small: 12px $ font-size-medium: 14px $ font-size-large: 18px
The syntax of CSS variables is as follows:
[Declare variable]
The variable must start--. For example, -- example-variable: 20px, which means that 20px is assigned to the -- example-varibale variable.
You can place statements that declare variables in any element. To set global variables, you can set them to root, body, or html.
:root{--bgColor:#000;}
Variable declaration is similar to a general style declaration statement. You can also use inline styles.
<body style="--bgColor:#000">
[Use variables]
Use the var () function to use variables and use them anywhere. For example, var (-- example-variable) returns the value of -- example-variable.
<body style="--bgColor:#000;"> <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div> </body>
The var () function also has an optional parameter to set the default value. When the variable cannot obtain the value, the default value is used.
<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>
[Note] the detailed usage of CSS variables is now
@ Apply
Before introducing @ apply, we will first introduce the Mixed Macro @ mixin in sass, which is a reusable code block.
For example, common text overflow and hidden Reuse
@mixin overflow-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };div { @include overflow-ellipsis;}
The application rule set @ apply Implements similar functions. Compared with var (), @ apply refers to the set of referenced styles, while var () refers to a separate style value.
:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };}.title{ width:200px; @apply --overflow-ellipsis;}
Custom Selector
Custom Selector@custom-selectorFollowed by:--Next is the name of the custom selector, followed by the selector to be defined, multiple are separated by commas
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
In this way, -- heading becomes a usable selector.
:--heading{ margin: 0;}h1, h2, h3, h4, h5, h6｛ margin: 0; ｝
The above two pieces of code have the same effect
Selector nesting
CSS rules contain a lot of repeated content
table.colortable td { text-align:center;}table.colortable td.c { text-transform:uppercase;}table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black;}table.colortable th { text-align:center; background:black; color:white;}
After the nested syntax is used, the Code is as follows:
table.colortable { & td { text-align:center; &.c { text-transform:uppercase } &:first-child, &:first-child + td { border:1px solid black } } & th { text-align:center; background:black; color:white; }}
When using nested style rules, you must be able to reference the elements matched by the parent rule. After all, it is the entire nested point. To achieve this goal, this specification defines a new selector, namely a nested selector, which is written as an ASCII symbol &
When used in the selector of the nested style rule, the nested selector indicates the elements matched by the parent rule. In any other situation, it represents nothing. (That is, it is valid, but does not match any element)
[Note] the two types of errors of & nested selector are as follows:
.foo { color: red; .bar & { color:blue; }}.foo { color: red; &.bar, .baz { color: blue; }}
[@ Nest]
To solve the vulnerability of the nested selector &, you can use the @ nest selector. @ nest can be applied to a wider range, as long as it works with the nested selector &.
. Foo {color: red; @ nest &>. bar {color: blue ;}/// equivalent. foo {color: red ;}. foo>. bar {color: blue ;}
. Foo {color: red; @ nest. parent & {color: blue ;}// equivalent. foo {color: red ;}. parent. foo {color: blue ;}
. Foo {color: red; @ nest: not (&) {color: blue ;}// equivalent. foo {color: red;}: not (. foo) {color: blue ;}
[Note] the two error codes for @ nest selector are as follows:
.foo { color: red; @nest .bar { color: blue; }}.foo { color: red; @nest & .bar, .baz { color: blue; }}
Last
Unfortunately, except that the CSS variable can be used in the new version of chrome, the new usage of other CSS selectors is currently not supported by browsers. However, the CSS next plug-in postcss can solve all problems.
As stated on the official cssnext website, today we will start to use tomorrow's CSS syntax.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
