This article first appeared on my blog

The previous two articles, “CSS You Don’t Know (PART 1)” and “CSS You Don’t Know (Part 2),” outlined some of the more obscure but useful CSS techniques. This article, the third in the CSS You Don’t Know series, will continue to explore CSS techniques. Unlike the first two articles, this article will focus on how CSS pseudo-classes and pseudo-elements can be used in projects. Pseudo-class I believe we are most familiar with and use the most :hover, :active, :focus and so on, because these are too commonly used in ordinary projects (however, I still see there are js to add. Hover class to change the background color of the students 😴). And false elements such as :before, :after I believe you are also familiar with the use of. Of course, the more common pseudo class (element) is not discussed in this article, this article mainly introduces some rare but very practical pseudo class (element).

The CSS world has changed. Let go of the past and embrace change

The difference between pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements are a confusing concept, not only in their names, but also in the way they are written (currently they are written the same due to compatibility issues). This makes it easier to confuse 😅. But I hope you get into the habit of writing, and leave compatibility to conversion tools like PostCSS.

specification

Css3 specifies that pseudo-classes are represented by a colon:, while pseudo-elements are represented by two colons ::.

The difference between

  • Pseudo classes are more defined as states, such as:hover, or a specific special element that can be modified using CSS, such as:first-child
  • Pseudo-classes use a colon:
  • Common pseudo-classes:
    • :hover
    • :active
    • :focus
    • :visited
    • :link
    • :lang
    • :first-child
    • :last-child
    • :not
  • Pseudo-elements are simply virtual elements that don’t exist in the DOM document tree. They are just like HTML elements, but you can’t get them using JavaScript, for example:before
  • Pseudo-elements use two colons: :
  • Common pseudo-elements:
    • ::before
    • ::after
    • ::first-letter
    • ::first-line

with:validand:invalidTo do form validation in real time

Html5 enriches form elements by providing form element attributes like Required,email, and TEL. Similarly, we can use :valid and :invalid to validate html5 form attributes.

  • :requiredThe pseudo class specifies the form element with the required attribute
  • :validThe pseudo class specifies a required form element by matching correctly
  • :invalidThe pseudo class specifies a form element that does not match the specified requirement


    CSS implements form validation

How do you feel about learning Angular at first 🤓

.valid {
  border-color: # 429032;
  box-shadow: inset 5px 0 0 # 429032;
}
.invalid {
  border-color: #D61D1D;
  box-shadow: inset 5px 0 0 #D61D1D;
}
.required {
  border-color: #056B9B;
  box-shadow: inset 5px 0 0 #056B9B;
}
input.textarea {
  &:valid {
    @extend .valid;
  }
  &:invalid {
    @extend .invalid;
  } 
  &:required {
    @extend.required; }}Copy the code

with:targetTo achieve the folding panel

:target is an internal link in the document, that is, a URL followed by an anchor name # that points to a specific element in the document.

Take advantage of: Target’s feature allows you to implement display hide or Collapse panels that previously could only be implemented using JavaScript.

.collapse{>.collapse-body {
    display: none; &:target { display: block; }}}Copy the code

Target implements collapsing panels



Preview CSS implementation Collapse panel demo

with:notTo exclude other selectors

:not is a not/no concept. I’ve used it a lot in the project Mo-CSS, especially in the form class, to set the hover state of a form element beyond its ReadOnly and Disabled states, so that when the element is readonly and Disabled, it doesn’t hover.

@mixin buttonStyle ($border.$background.$color.$hoverBorder.$hoverBackground.$hoverColor) {
    color: $color;
    border-color: $border;
    background-color: $background;
    &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) {
        &:hover,
        &:active {
            color: $hoverColor;
            border-color: $hoverBorder;
            background-color: $hoverBackground; }}}Copy the code

with:nth-child(even/odd)To achieve interlaced color change

The arguments of pseudo-classes such as :nth-child are mostly a numerical value or mathematical expression 2n+1, while even is used as an argument to denote even and odd as an argument to denote odd are often ignored.

ul{&.odd{>li:nth-child(odd) {
      background: red; }} &.even{>li:nth-child(even) {
      background: green; }}}Copy the code

Application of ODD /even to interlaced discoloration

with::selectionTo beautify the selected text

As you can see, :: Selection is used to style selected text, changing the browser’s unchanging text selection color (blue).

::selection{
 color: #fff;
 background-color: #6bc30d;
}Copy the code

Selection sets the selected text style

with::placeholderTo beautify the placeholders

::placeholder is used to modify the style of form elements such as input/ Textarea.

<input type="text" placeholder="I'm a custom placeholder." />Copy the code

Custom placeholder

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
}
input, textarea {
   @include placeholder {
      color: #f00; }}//css
input::-webkit-input-placeholder{
    color: #f00;
}
input::-moz-placeholder{
     color: #f00;
}
input:-ms-input-placeholder{
     color: #f00;
}Copy the code

with::first-letterTo achieve paragraph header drop

Sink: Set the first line of a paragraph to make the first word of the paragraph larger and a certain distance down to align with the following paragraph, leaving the rest of the paragraph as it is

Initial sinking effect

As shown in the figure, to achieve a similar effect earlier, we need to add another label, such as:

<p>
   <b>before</b>.</p>Copy the code

Now, however, all you need is a CSS pseudo-element.

The first-letter pseudo-element is used to style the first letter of the text

p::first-letter{
  font-size: 6em;
  line-height: 1;
  float: left;
}Copy the code

with::first-lineTo specifically mark the first line of the paragraph

As its name suggests, this pseudo-element represents the first line of a paragraph, and you can use any style to control it.

First-line Indicates the first line of a segment

p::first-line{
  color: red
}Copy the code

summary

There are many pseudo classes and pseudo elements in CSS. For compatibility or other reasons, the pseudo classes/elements introduced in this article are rarely used, which is a pity. However, in order to keep the project healthy and sustainable, it is important to be aware of the difference between pseudo-classes and pseudo-elements. Whenever possible, write pseudo-classes with a colon: and pseudo-elements with two colons ::, just as you use autoprefixer to generate browser prefixes, and leave the: and :: conversion to tools like PostCSS.

series

  • CSS you Don’t Know (Part 1)
  • CSS you Don’t Know (2)

This article first appeared on my blog