Skip to main content

selector-type-case

Specify lowercase or uppercase for type selectors.

    a {}
/** ↑
 * This is type selector */

Use this rule to enforce a convention, as type selectors match HTML elements regardless of case. For example, require lowercase, as HTML writes element names. This rule ignores mixed-case SVG elements, e.g. foreignObject, whose case is significant.

The fix option can automatically fix all of the problems reported by this rule.

This rule supports 2 message arguments: the type selector and its expected case.

Options​

"lower"​

{
  "selector-type-case": "lower"
}

The following patterns are considered problems:

A {}
LI {}

The following patterns are not considered problems:

a {}
li {}

"upper"​

{
  "selector-type-case": "upper"
}

The following patterns are considered problems:

a {}
li {}

The following patterns are not considered problems:

A {}
LI {}

Optional secondary options​

ignoreTypes​

{ "ignoreTypes": ["array", "of", "types", "/regex/"] }

Given:

{
  "selector-type-case": [
    "lower",
    { "ignoreTypes": ["$childClass", "/(p|P)arent.*/"] }
  ]
}

The following patterns are not considered problems:

myParentClass {
  color: pink;
}

$childClass {
  color: pink;
}