CSS selectors new uses

Now, the pre-processor (such as sass) seems to have become standard in the development of CSS, jQuery is just a few years ago to develop a standard, like JS. The JS querySelector draws jQuery selector thinking, CSS selectors also draw preprocessor variable definitions, the nested selector, block reusing common functions. This article details the new use of CSS selectors

variable

In general, when we web development is performed, there will be a variable definition specification to sass example, as shown below

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333

//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

The syntax for CSS variables are as follows

[Variable] Statement

Variables must --begin with. E.g. -example-variable: 20px, 20px meaning assigned to the variable -example-varibale

Variable declaration statement can be placed in any element, if you want to set a global variable, you can set: root, body or html

:root{--bgColor:#000;}

Variable declaration like the normal style declaration statement, you can also use inline styles

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

[Use] variable

Use var () function uses a variable, and may be used at any place. For example: var (-example-variable) -example-variable returns a value corresponding to

<body style="--bgColor:#000;">
    <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    
</body>

var () function has an optional parameter, is used to set default values, when the value of the variable can not be obtained, then the default value

<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>

@apply

Before the introduction @apply, to introduce the mixed sass macros @mixin, refers to the code blocks can be reused

For example, common text overflow hidden reuse

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
div {
    @include  overflow-ellipsis;
}

The application of the rule set @apply also achieve similar functionality. Compared with var (), @ apply a set of reference patterns, and var () is a reference value of a single pattern

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

Custom selector

By selecting a custom @custom-selectordefined, followed by a :--followed by the name of the custom selector, followed by the selectors to define a plurality of separated by commas

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

In this way,: - heading to become a selector that can be used

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

The same effect of the above two codes

Nested selector

CSS rule contains many 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;
}

The use of nested syntax, as follows

table.colortable {
  &amp; td {
    text-align:center;
    &amp;.c { text-transform:uppercase }
    &amp;:first-child, &amp;:first-child + td { border:1px solid black }
  }
  &amp; th {
    text-align:center;
    background:black;
    color:white;
  }
}

When using nested style rule, you must be able to reference the matching element by the parent rule; point after the entire nest. For this purpose, this specification defines a new option, i.e. nested selector written as ASCII symbols &

When used in a nested style rule selector, the nested selector element represented by the parent matching rule. When used in any other case, it does not mean anything. (In other words, it is valid, but does not match any element)

Note: two erroneous writing nested & selectors shown below

.foo {
  color: red;
  .bar &amp; { color:blue; }
}
.foo {
  color: red;
  &amp;.bar, .baz { color: blue; }
}

【@nest】

In order to address the vulnerabilities of nested selectors & above, you can use @nest selectors, @ nest applicable to a wider range, as long as nested selectors & joint action to

.foo {
  color: red;
  @nest &amp; > .bar {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .foo > .bar { color: blue; }

.foo {
  color: red;
  @nest .parent &amp; {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .parent .foo { color: blue; }

.foo {
  color: red;
  @nest :not(&amp;) {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   :not(.foo) { color: blue; }

Note: @nest selectors two errors written as follows

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest &amp; .bar, .baz {
    color: blue;
  }
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

At last

Unfortunately, in addition to CSS variables variable can be used in the new version of chrome, the other new uses CSS selectors are currently no browser support. However, cssnext plug CSS postprocessor postcss can solve all the problems

Like cssnext official website said the same today, tomorrow will start using CSS syntax

Programming World - Cloud

Published 267 original articles · won praise 9 · views 10000 +

Private letter concerns