A new usage of CSS selectors

Source: Internet
Author: User
Now, the preprocessor (such as sass) seems to have become standard for developing CSS, just as jquery was developed as standard for JS a few years ago. JS's queryselector draw on the idea of jquery's selector, CSS selectors also draw on the pre-processor variable definition, selector nesting, code block reuse and other common functions. This article describes the new usage of CSS selectors in detail.


In general, when we do web development, we have a set of variable definition specifications, taking 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 for CSS variables is as follows

"Declaring variables"

Variables must begin with--. For example--example-variable:20px, meaning to assign 20px to the--example-varibale variable

You can place statements that declare variables inside any element, and if you want to set global variables, you can set to: root, body, or HTML

: Root{--bgcolor: #000;}

A variable declaration is like a normal style declaration statement, or you can use an inline style

<body style= "--bgcolor: #000" >

"Use variables"

Use the Var () function as a variable and can be used anywhere. For example, VAR (--example-variable) returns the value corresponding to--example-variable

<body style= "--bgcolor: #000;" >    <p style= "Width:100px;height:100px;background-color:var (--bgcolor)" ></p>    </body>

The Var () function also has an optional parameter that sets the default value, which is used when the variable cannot get the value.

<p style= "Width:100px;height:100px;background-color:var (--bgcolor,pink)" ></p>

 [note] Detailed usage of CSS variables.


Before introducing @apply, let's introduce the hybrid macro @mixin in sass, which refers to the code blocks that can be reused

For example, common text overflow hiding reuse

@mixin overflow-ellipsis{    Overflow:hidden;    text-overflow:ellipsis;    White-space:nowrap;  }; p {    @include  overflow-ellipsis;}

Applying rule set @apply is also a similar function. @apply is a collection of reference styles compared to Var (), and 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 Selectors

The custom selector is defined by @custom-selector, followed by a:-followed by the name of the custom selector, followed by the selector that needs to be defined, and multiple separated by commas

@custom-selector:--heading H1, H2, H3, H4, H5, H6;

In this way, the--heading becomes a selectable selector that can be used

:--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 duplicate 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 using the nested syntax, 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 elements that are matched by the parent rule; After all, it is the entire nesting point. To achieve this, the specification defines a new selector, a nested selector, written as an ASCII symbol &

When used in a selector of a nested style rule, the nested selector represents an element that is matched by the parent rule. When used in any other case, it does not represent anything. (That is, it is valid, but does not match any element)

[Note the two types of error]& nested selectors are as follows

. foo {  color:red;  . Bar & {Color:blue;}}. foo {  color:red;  &.bar,. Baz {color:blue;}}


To address the fragility of the above nested selectors &, you can use the @nest selector, @nest can be used more broadly, as long as the nested selector & Synergy

. foo {  color:red;  @nest & >. bar {    color:blue;  }} Equivalent to   . foo {color:red;}   . Foo >. bar {color:blue;}. foo {  color:red;  @nest. Parent & {    color:blue;  }} Equivalent to   . foo {color:red;}   . Parent. foo {color:blue;}. foo {  color:red;  @nest: Not (&) {    color:blue;  }}  Equivalent to   . foo {color:red;}   : Not (. foo) {color:blue;} [note] The two types of error @nest selectors are as follows. foo {  color:red;  @nest. Bar {    color:blue;  }}. foo {  color:red;  @nest & Bar,. Baz {    color:blue;  }}

At last

Unfortunately, in addition to the CSS variable variable can be used under the new version of Chrome, the new usage of other CSS selectors currently do not have browser support. However, the Cssnext plugin in the CSS post processor postcss can solve all problems

Just like the Cssnext website says, start using tomorrow's CSS syntax today

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.