Tag Name Selector

A custom pseudo-class-style selector to allow CSS authors the ability to target elements by matching a partial tag name of an element. Very useful for HTML with custom tag names or XML.

:--tag-name(<method> <tag-name-part>) { <list of declarations> }

• <method> is one of the following ^, *, or $
• <tag-name-part> is any part of a valid tag name

Usage

Suppose you have HTML like this that you wanted to target:

<custom-tag-one>One</custom-tag-one>
<custom-tag-two>Two</custom-tag-two>
<custom-tag-three>Three</custom-tag-three>

You could write a CSS selector list to target all elements like this:

custom-tag-one,
custom-tag-two,
custom-tag-three {
  color: lime;
}

Or you could use :--tag-name() with the ^ method to match tag names that start with the given selector part:

:--tag-name(^ custom-tag-) {
  color: lime;
}

Alternatively if you wanted to target any tag name that includes -tag- in the name anywhere, you could use the * method to match tag names that include the given selector part:

:--tag-name(* -tag-) {
  color: lime;
}

Lastly, you can use the $ method to match tag names that end with the given selector part. Here we can match only the <custom-tag-one> element because it's the only one whose tag name ends with -one:

:--tag-name($ -one) {
  color: lime;
}