33 super handy CSS selectors that you've probably never seen before.

Author: Chen Da Yu Tou

Making: KRISACHAN

preface

CSS selectors are a very important part of the CSS world.

After CSS 2, all CSS properties are maintained module by module.

The same is true for CSS Selectors, but CSS Selectors Level 4 is now in its fourth edition, with the first draft released on 29 September 2011 and the last updated on 21 November 2018.

Here’s a look at some of the new Level 4 selectors.

The body of the

Now let’s divide it by type

Logical Combinations

Under this category, we have the following four selectors:

`:not()`

The :not() tag is not a new tag, but in Level 4 it has been added with the following code:

/* All div boxes except. Left,. Right, and. Top will become Flex */
div:not(.left..right..top) {
  display: flex;
}

/* is equivalent to */
div:not(.left), div:not(.right), div:not(.top) {
  display: flex;
}
Copy the code

The compatibility is as follows:

Er… Still can’t use

`:is()`

The :is() pseudo-class takes a list of selectors as an argument and selects elements that can be selected by any of the selectors in that list. This is useful for writing large selectors in a more compact form.

Take a look:

/* Select any of the suspended paragraphs in header, main, and footer (p tag) */
:is(header.main.footer) p:hover {
  color: red;
  cursor: pointer;
}

/* is equivalent to */
header p:hover.main p:hover.footer p:hover {
  color: red;
  cursor: pointer;
}
Copy the code

Compatibility is as follows:

`:where()`

The: WHERE () pseudo-class takes a list of selectors as its arguments and will select all elements that can be selected by any rule in the list of selectors.

Where () has a priority of 0, but the priority of is() is determined by the highest priority selector in its list of selectors.

The code is as follows:

<style>
    :is(section.is-styling.aside.is-styling.footer.is-styling) a {
        color: red;
    }

    :where(section.where-styling.aside.where-styling.footer.where-styling) a {
        color: orange;
    }

    footer a {
        color: blue;
    }
</style>
<article>
    <h2>:is()-styled links</h2>
    <section class="is-styling">
        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
    </section>

    <aside class="is-styling">
        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
    </aside>

    <footer class="is-styling">
        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
    </footer>
</article>

<article>
    <h2>:where()-styled links</h2>
    <section class="where-styling">
        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
    </section>

    <aside class="where-styling">
        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
    </aside>

    <footer class="where-styling">
        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
    </footer>
</article>
Copy the code

:is() and :where()

The compatibility is as follows:

`:has()`

The :has() pseudo-class represents an element whose given selector argument (relative to the element’s :scope) matches at least one element.

:has() takes a selector group as an argument. In the current specification :has() is not listed as part of the real-time selector configuration, meaning it cannot be used in stylesheets.

The syntax is as follows:

// The following selector will only match directly containing <img< of the > child elementa> elementa:has(> img) // The following selector will only match the following <p< of the > elementh1> element:h1:has(+ p)
Copy the code

The compatibility is as follows:

Well, all red…

Linguistic pseudo-classes (Linguistic pseudo-classes)

`:dir()`

The :dir() pseudo-class matches elements in a particular literal writing direction. In HTML, text direction is determined by the dir attribute. Other document types may have other ways of defining text orientation.

:dir() is not the same as using [dir=… Property selector. The latter matches the value of dir and does not match elements that do not define this attribute, even if the element inherits the parent element’s attribute; Similarly, [dir= RTL] or [dir= LTR] will not match elements with the dir attribute value auto. And :dir() matches the attributes evaluated by the client, whether the inherited dir value or dir value is auto.

Examples are as follows:

<style>
    :dir(ltr) {
        background-color: yellow;
    }

    :dir(rtl) {
        background-color: powderblue;
    }
</style>
<div dir="rtl">
      <span>test1</span>
      <div dir="ltr">test2
        <div dir="auto">ע ִ ב ְ ר ִ י ת</div>
      </div>
</div>
Copy the code

The effect is as follows:

The compatibility is as follows:

Another red.

`:lang()`

The :lang() pseudo-class matches page elements based on the element language.

Examples are as follows:

/* The following example selects the text language div element with -tn (ar-TN, FR-tn). */

div:lang(*-TN) {
    background-color: green
}
Copy the code

Browser support status: None supported.

Location pseudo-classes

`:any-link`

The :any-link pseudo-class selector represents an element that has a link anchor point, regardless of whether it has been accessed, that is, it matches every ,

, or element that has an href attribute. Therefore, it matches all :link or :visited.

Examples are as follows:

<style>
    a:any-link {
        border: 1px solid blue;
        color: orange;
    }

    /* WebKit kernel browser */
    a:-webkit-any-link {
        border: 1px solid blue;
        color: orange;
    }
</style>
<a href="https://example.com">External link</a><br>
<a href="#">Internal target link</a><br>
<a>Placeholder link (won't get styled)</a>
Copy the code

The effect is as follows:

The compatibility is as follows:

`:local-link`

The :local-link pseudo-class can format local links separately.

Examples are as follows:

a:local-link {
   text-decoration: none;
}
Copy the code

Effects & Compatibility

None of the browsers support it, so you can’t see the effect

`:target-within`

The :target-within pseudo-class applies to the element matched by :target and all matched elements within its DOM node.

Examples are as follows:

div:target-within {
  	border: 2px solid black;
}
Copy the code

Effects & Compatibility

None of the browsers support it, so you can’t see the effect

`:scope`

The :scope pseudo-class represents the element of the scope to be matched as a selector. For now, however, it is equivalent to :root.

Because no browser supports CSS local scope.

Examples are as follows:

:scope {
  	background-color: lime;
}
Copy the code

The compatibility is as follows:

Browser algorithms are not supported

User Action pseudo-classes

`:focus-visible`

When the element matches the: Focus pseudo class and the client (UA) heuristic engine determines that the focus should be visible (in this case many browsers display “focus boxes” by default). , the: Focus-Visible pseudo class will take effect.

This selector can effectively display different forms of focus depending on the user’s type (mouse vs keyboard).

Examples are as follows:

<style>
    input.button {
        margin: 10px;
    }

    .focus-only:focus {
        outline: 2px solid black;  
    }

    .focus-visible-only:focus-visible {
        outline: 4px dashed darkorange;
    }
</style>
<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
Copy the code

The effect is as follows:

The compatibility is as follows:

Currently only Chrome 67+ compatible…

`:focus-within`

The :focus-within pseudo-class applies to the element matched by :focus and all matched elements within its DOM node.

Examples are as follows:

<style>
    form {
        border: 1px solid;
        color: gray;
        padding: 4px;
    }

    form:focus-within {
        background: #ff8;
        color: black;
    }

    input {
        margin: 4px;
    }
</style>
Copy the code

The effect is as follows:

Time-dimensional pseudo-classes

`:current` && `:past` && `:future`

This pseudo-class selector selects the language rendering of

Examples are as follows:

/* Current */
:current(p.span) {
  	background-color: yellow;
}


/* Past */
:past./* Future */
:future {
  	display: none;
}
Copy the code

The compatibility is as follows:

There is currently no browser support

The Input pseudo-classes

`:read-only` 与 `:read-write`

:read-only A pseudo-class selector indicates that the current element is not modifiable by the user.

:read-write A pseudo-class selector indicates that the current element is user-modifiable. This pseudo-class selector can be used in an inputable element or a contenteditable element (HTML5 attribute).

Examples are as follows:

<style>
    :read-only {
      font-size: 20px;
      color: green;
    }

    :read-write {
      border: 1px solid orange;
      font-size: 18px;
    }
</style>
<input type="text" placeholder='text here'>
<input type="tel" placeholder='number here'>
<select>
      <option>1</option>
      <option>2</option>
</select>

Copy the code

The effect is as follows:

The compatibility is as follows:

`:placeholder-shown`

:placeholder-shown pseudo-classes take effect when or elements show placeholder text.

Examples are as follows:

<style>
    input {
        border: 2px solid black;
        padding: 3px;
    }

    input:placeholder-shown {
        border-color: silver;
    }
</style>
<input placeholder="Type something here!">
Copy the code

The effect is as follows:

The compatibility is as follows:

`:default`

The :default pseudo-class selector represents the default form element in a set of related elements.

This selector can be used on

Examples are as follows:

<style>
    input:default {
      	box-shadow: 0 0 2px 1px coral;
    }

    input:default + label {
      	color: coral;
    }
</style>
<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">Winter</label>
Copy the code

The effect is as follows:

The compatibility is as follows:

`:indeterminate`

The: indeTerminate pseudo-class selector represents form elements whose state is uncertain.

It support:

<input type="checkbox">Elements, theindeterminateProperty is set by JavaScript totrue 。
<input type="radio">Element, the form has the samenameValue when all radio buttons are not selected.
Being in a state of uncertainty<progress>The element

Examples are as follows:

<style>
    input.span {
        background: red;
    }

    :indeterminate.:indeterminate + label {
        background: lime;
    }
    progress {
      	margin: 4px;
    }
    progress:indeterminate {
          opacity: 0.5;
          background-color: lightgray;
          box-shadow: 0 0 2px 1px red;
    }
</style>
<div>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Background should be green</label>
</div>
<br />
<div>
    <input type="radio" id="radio">
    <label for="radio">Background should be green</label>
</div>
<br />
<progress></progress>
<script>
    'use strict'
    const inputs = document.querySelectorAll('input')
    inputs.forEach(input= > {
        input.indeterminate = true
    })
</script>
Copy the code

The effect is as follows:

The compatibility is as follows:

`:valid` 与 `:invalid`

Validity pseudo-class selectors (:valid and :invalid) match valid or invalid, or

The :valid pseudo-class selector represents whose value is validated, which tells the user that their input is valid.

The :invalid pseudo-class selector indicates that the value does not pass the validating , which tells the user that their input is invalid.

Examples are as follows:

<style>
    input:valid {
        outline: 1px solid green;
    }

    input:invalid {
        outline: 1px solid red;
    }
</style>Input text:<input type="text" pattern="[\w]+" required />
<br />Enter the phone number:<input type="tel" pattern="[0-9] +" required />
Copy the code

The effect is as follows:

The compatibility is as follows:

`:in-range` 与 `:out-of-range`

If a time or number has a Max or min attribute, then :in-range matches whose input values are in the specified range, and :out-of-input matches whose input values are not in the specified range. If no range is specified, neither match.

Examples are as follows:

<style>
    li {
        list-style: none;
        margin-bottom: 1em;
    }

    input {
        border: 1px solid black;
    }

    input:in-range {
        background-color: rgba(0.255.0.0.25);
    }

    input:out-of-range {
        background-color: rgba(255.0.0.0.25);
        border: 2px solid red;
    }

    input:in-range + label::after {
        content: 'okay.';
    }

    input:out-of-range + label::after {
        content: 'out of range! ';
    }
</style>
<form action="" id="form1">
    <ul>Values between 1 and 10 are valid.
        <li>
            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
            <label for="value1">Your value is </label>
        </li>
    </ul>
</form>
Copy the code

The effect is as follows:

The compatibility is as follows:

`:required` 与 `:optional`

Pseudo-class selectors: Required and :optional match , < SELECT >, or elements.

: Required

: Optional

Examples are as follows:

<style>
    input:required {
        border: 1px solid orange;
    }
    input:optional {
        border: 1px solid green;
    }
</style>Mandatory:<input type="text" required>
<br />Optional:<input type="text">
Copy the code

The effect is as follows:

The compatibility is as follows:

The compatibility of required is available above.

`:blank`

The :blank pseudo-class selector is used to match the following nodes:

No child nodes;
Only empty text nodes;
A whitespace – only text node.

Somewhat similar to :empty, but looser than :empty, and currently not supported by any browser.

`:user-invalid`

:user-invalid The pseudo-class selector matches incorrectly entered elements. However, unlike other input pseudo-classes, it only matches user input errors, not silent errors, so it will be more user-friendly, unfortunately, there is still no browser support.

Tree-structural pseudo-classes

`:nth-child` 与 `:nth-last-child`

: nth-Child and: nth-last-Child are not pseudo-class selectors introduced at Level 4, but the ability to match elements in groups was added in Level 4.

Nth-child /nth-last-child(An + B [of S]?)

Examples are as follows:

:nth-child(-n+3 of li.important)
Copy the code

The above example selects the NTH element that matches it by passing the selector argument, which represents the first three child elements in Li.important.

It differs from the following rules:

li.important:nth-child(-n+3)
Copy the code

The first three child elements can only be selected if they were li.important.

The compatibility is as follows:

(Note: Safari overtook the car on a curve, but other browsers don’t support it, so it doesn’t work…)

Grid-structural Selectors

`||`

| | combiner choose to belong to a table row.

Examples are as follows:

<style>
    col.selected || td {
          background: gray;
          color: white;
          font-weight: bold;
    }
</style>
<table border="1">
      <colgroup>
            <col span="2"/>
            <col class="selected"/>
      </colgroup>
      <tbody>
            <tr>
                  <td>A
                  <td>B
                  <td>C
            </tr>
            <tr>
                  <td colspan="2">D</td>
                  <td>E</td>
            </tr>
            <tr>
                  <td>F</td>
                  <td colspan="2">G</td>
            </tr>
      </tbody>
</table>
Copy the code

The above example grays cells C, E, and G.

Unfortunately, there is no browser support yet.

`:nth-col()` 与 `:nth-last-col()`

Pseudo-class selectors :nth-col() and :nth-last-col() represent nodes that select forward or reverse table rows.

The syntax is similar to :nth-child and: nth-last-Child, except that it selects the elements in the table.

There is still no browser support.

The last

conclusion

These are all the new CSS selectors in Level 4, and they are all very useful, even if browser support for some selectors is not very good.

Hopefully browser vendors will soon add support for them.

The resources

can i use
MDN
Selectors Level 4 W3C Working Draft

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. His wechat id is krisChans95

33 super handy CSS selectors that you’ve probably never seen before.

preface

The body of the

Logical Combinations

:not()

:is()

:where()

:has()

Linguistic pseudo-classes (Linguistic pseudo-classes)

:dir()

:lang()

Location pseudo-classes

:any-link

:local-link

:target-within

:scope

User Action pseudo-classes

:focus-visible

:focus-within

Time-dimensional pseudo-classes

:current && :past && :future

The Input pseudo-classes

:read-only 与 :read-write

:placeholder-shown

:default

:indeterminate

:valid 与 :invalid

:in-range 与 :out-of-range

:required 与 :optional

:blank

:user-invalid

Tree-structural pseudo-classes

:nth-child 与 :nth-last-child

Grid-structural Selectors

||

:nth-col() 与 :nth-last-col()

The last

conclusion

The resources

Afterword.

Related Posts

Day02 JavaScript inheritance

The front end must know must know – the black technology that manipulates URL

Vue3.2 setup syntax sugar and Vue3 hook(functional form)

`:not()`

`:is()`

`:where()`

`:has()`

`:dir()`

`:lang()`

`:any-link`

`:local-link`

`:target-within`

`:scope`

`:focus-visible`

`:focus-within`

`:current` && `:past` && `:future`

`:read-only` 与 `:read-write`

`:placeholder-shown`

`:default`

`:indeterminate`

`:valid` 与 `:invalid`

`:in-range` 与 `:out-of-range`

`:required` 与 `:optional`

`:blank`

`:user-invalid`

`:nth-child` 与 `:nth-last-child`

`||`

`:nth-col()` 与 `:nth-last-col()`