noUnknownTypeSelector (CSS)

Language CSS

Summary

Rule available since: v1.9.4
Diagnostic Category: lint/correctness/noUnknownTypeSelector
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as selector-type-no-unknown

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noUnknownTypeSelector": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow unrecognized element names in type selectors.

A type selector targets elements by tag name, as in button {}. Names from the HTML, SVG, and MathML specifications are recognized. Valid custom-element names such as x-button are also allowed.

See the MDN type-selector reference and the element references for HTML, SVG, and MathML.

SCSS limitations

Type selector names containing SCSS interpolation are ignored because the emitted name cannot be determined statically.

Examples

Invalid

1
unknown {}

code-block.css:1:1 lint/correctness/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unknown type selector is not allowed.
  
  > 1 │ unknown {}
      │ ^^^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ A selector for an element that does not exist never matches, so its styles are never applied.
  
  ℹ Consider replacing the unknown type selector with valid one.

1
unknown > ul {}

code-block.css:1:1 lint/correctness/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unknown type selector is not allowed.
  
  > 1 │ unknown > ul {}
      │ ^^^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ A selector for an element that does not exist never matches, so its styles are never applied.
  
  ℹ Consider replacing the unknown type selector with valid one.

1
x-Foo {}

code-block.css:1:1 lint/correctness/noUnknownTypeSelector ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unknown type selector is not allowed.
  
  > 1 │ x-Foo {}
      │ ^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ A selector for an element that does not exist never matches, so its styles are never applied.
  
  ℹ Consider replacing the unknown type selector with valid one.

Valid

1
input {}

1
ul > li {}

1
x-foo {}