2

There is a stylelint rule selector-no-qualifying-type that says

Disallow qualifying a selector by type.

    a.foo {}
/** ↑
 * This type selector is qualifying the class */

A type selector is "qualifying" when it is compounded with (chained to) another selector (e.g. > a.foo, a#foo). This rule does not regulate type selectors that are combined with other selectors > via a combinator (e.g. a > .foo, a #foo).

Why is "qualifying" be problematic?

1 Answer 1

0

This rule might be useful when you making a lot of components which may depends on each other. And when you declaring rules for selector with "qualification" then these rules might be overridden only by selector with the same "qualifications" or with selector with higher priority. For example:

/*
Qualification applied, this selector have higher priority 
*/
a.link {
  color: red;
}

/* 
This selector without a qualification and is unable to override previous rule 
*/
.link {
  color: green;
}

/* 
Just an example of media query, where .link will not be 
overridden because of the lower priority 
*/
@media screen {
  .link {
    color: orange;
  }
}

Problems with priority might escalate even further if #id selectors used with tags.

3
  • Thanks for the answer. But I still don't understand why input[type = 'button'] {} is problematic and input {} is not.
    – krema
    Oct 26, 2021 at 10:35
  • @krema this is just kinda subjective thing about how different programmers creates stylesheets. Some will use .class-names only for all the elements and will never use even a tag as part of the selector. So the rule which prevents you from creating such rules will help them keep their code consistent.
    – koloml
    Oct 26, 2021 at 11:12
  • If you feel comfortable to write selectors and override them later with parts like [type=button] — then you just should disable this linting option.
    – koloml
    Oct 26, 2021 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.