Skip to content
A custom stylelint rule to disallow combinations of qualifying elements with id, class or attribute selectors.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json

README.md

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
    }
  }
};
You can’t perform that action at this time.