https://github.com/qodesmith/list-css-selectors
List all the selectors in your CSS files(s).
https://github.com/qodesmith/list-css-selectors
Last synced: 8 months ago
JSON representation
List all the selectors in your CSS files(s).
- Host: GitHub
- URL: https://github.com/qodesmith/list-css-selectors
- Owner: qodesmith
- Created: 2017-12-30T12:30:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-10T00:20:58.000Z (about 8 years ago)
- Last Synced: 2025-03-06T12:54:18.913Z (over 1 year ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# List CSS Selectors
A simple way to list all the selectors used in your CSS file(s).
## Installation
Via [npm](https://www.npmjs.com/package/list-css-selectors):
```
npm i list-css-selectors
```
## Usage
Your CSS file:
```css
div { display: block; }
#some-id { color: red; }
.some-class { color: white; }
.hover:hover { color: blue; }
[data-noval] { opacity: 0; }
[data-test='ok'] { opacity: 1; }
@keyframes softblink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.selector-in-media-query { width: 100%; }
}
```
Run **list-css-selectors**:
```javascript
const listSelectors = require('list-css-selectors');
const { resolve } = require('path');
const pathToMyFile = resolve(resolve(), './styles.css');
const selectors = listSelectors(pathToMyFile);
```
The results of `selectors` will be:
```javascript
[
'div',
'#some-id',
'.some-class',
'.hover::hover',
'[data-noval]',
'[data-test=\'ok\']',
'softblink',
'.selector-in-media-query'
]
```