stylelint-selector-qualifying-element

A stylelint custom rule to disallow combinations of qualifying elements with id, class or attribute selectors.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
stylelint-selector-qualifying-element
121.0.47 years ago7 years agoMinified + gzip package size for stylelint-selector-qualifying-element in KB

Readme

stylelint-selector-qualifying-element
Build Status
A stylelint custom rule to disallow combinations of qualifying elements with id, class or attribute selectors.
This rule will cause stylelint to warn you whenever a disallowed combination is used.

Installation

npm install stylelint-selector-qualifying-element

This plugin is compatible with v5.0.1+.

Details

There are 3 options (true / false): noElementWithAttribute, noElementWithClass, noElementWithId
For noElementWithAttribute: true:
input { /* OK */
  margin: 0
}

input[type='button'] { /* Not OK */
  margin: 0
}

For noElementWithClass: true:
.class { /* OK */
  margin: 0
}

div.class { /* Not OK */
  margin: 0
}

For noElementWithId: true:
#id { /* OK */
  margin: 0
}

div#id { /* Not OK */
  margin: 0
}

Usage

Add "stylelint-selector-qualifying-element" to your stylelint config plugins array, then add selector-qualifying-element to your rules, with your desired options.
Example:
{
  "plugins": [
    "stylelint-selector-qualifying-element"
  ],
  "rules": {
    "selector-qualifying-element": {
      "noElementWithClass": true // Or false
      "noElementWithId": true // Or false
      "noElementWithAttribute": false // Or true
    }
  }
};