# CSS Selector Extractor

Extract and categorize all CSS selectors from CSS content

> Canonical page: https://elysiatools.com/en/tools/css-selector-extractor

- **Category:** Development

- **Keywords:** css, selector, extractor, class, id, developer, stylesheet, analysis

## Overview

### CSS Selector Extractor

This tool helps you analyze and extract CSS selectors from your stylesheets:

**Supported Selector Types:**
- **Class Selectors**: .class-name, .multiple.classes
- **ID Selectors**: #id-name
- **Element Selectors**: div, span, button
- **Attribute Selectors**: [type="text"], [data-*]
- **Pseudo-classes**: :hover, :nth-child(2), :not(.class)
- **Pseudo-elements**: ::before, ::after, ::first-line
- **Combinators**: descendant (>), adjacent (+), general sibling (~)

**Features:**
- Ignores CSS comments
- Tracks line numbers
- Handles nested selectors (SCSS/LESS)
- Supports @media queries and @keyframes
- Deduplicates results
- Calculates CSS specificity

**Use Cases:**
- Audit CSS for complexity
- Find unused class names
- Generate selector documentation
- Analyze CSS performance
- Optimize stylesheet structure

## Inputs

- **CSS Content** (textarea): Enter your CSS content here...
- **Include Media Queries** (checkbox): Include selectors inside @media queries
- **Include Keyframes** (checkbox): Include selectors inside @keyframes
- **Deduplicate Results** (checkbox): Remove duplicate selectors from results
- **Calculate Specificity** (checkbox): Calculate CSS specificity for each selector

## When to use

- When auditing CSS files to assess complexity and improve maintainability.
- When identifying and removing unused class names or selectors from stylesheets.
- When generating reference documentation for CSS selectors in a development project.

## How it works

- Paste your CSS content into the input textarea or upload a file.
- Configure options such as including media queries, keyframes, deduplication, and specificity calculation.
- Extract the selectors to receive a categorized JSON output with details like selector type, line number, and specificity score.

## Use cases

- Auditing stylesheet complexity to optimize performance and reduce file size.
- Finding and cleaning up unused CSS selectors to streamline code.
- Creating automated documentation for CSS classes and IDs in a project.

## Frequently asked questions

### What CSS selector types are supported?

It supports class selectors, ID selectors, element selectors, attribute selectors, pseudo-classes, pseudo-elements, and combinators like descendant and adjacent siblings.

### Can it process SCSS or LESS files?

Yes, it handles nested selectors from SCSS and LESS, extracting them as part of the analysis.

### Does it remove duplicate selectors?

Yes, if the 'Deduplicate Results' option is enabled, it removes duplicate selectors from the output.

### How is CSS specificity calculated?

Specificity is calculated based on CSS rules, providing a score for each selector to help understand precedence and conflicts.

### Is the tool free to use?

Yes, the CSS Selector Extractor is free and requires no installation, running directly in your browser.

## Related tools

- [Bulk Email Extractor](https://elysiatools.com/en/tools/bulk-email-extractor): Extract all email addresses from input text, articles, web source code, or mixed content. Supports deduplication and export to JSON.
- [Bulk URL/Link Extractor](https://elysiatools.com/en/tools/bulk-url-extractor): Extract all HTTP/HTTPS links from text with deduplication and export options
- [Chinese Character Extractor (汉字提取器)](https://elysiatools.com/en/tools/chinese-character-extractor): Extract all Chinese characters from text, filtering out punctuation and English letters, numbers, and non-Chinese symbols
- [Emoji Extractor](https://elysiatools.com/en/tools/emoji-extractor): Extract all Unicode emoji from text, or optionally remove emojis
- [Hashtag & Mention Extractor](https://elysiatools.com/en/tools/hashtag-mention-extractor): Extract hashtags (#Topic) and user mentions (@Username) from social media text like Twitter, Instagram, etc.
- [Image Source Extractor](https://elysiatools.com/en/tools/image-source-extractor): Extract image URLs (src attributes) from HTML source code. Supports lazy-loaded images and srcset attributes.
- [IP Address Extractor](https://elysiatools.com/en/tools/ip-address-extractor): Extract IPv4 and IPv6 addresses from log files, server logs, network traces, or any text content
- [HTML Tag Stripper (HTML标签清除)](https://elysiatools.com/en/tools/new-html-tag-stripper): Remove HTML tags from code and extract clean text content

## Samples

- [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing
- [CSS Viewer Samples](https://elysiatools.com/en/samples/css-viewer-samples): Sample CSS stylesheets (variables, flexbox/grid, animations) for the in-browser CSS Viewer
- [Text with Emoji Samples](https://elysiatools.com/en/samples/text-with-emoji-samples): Mixed language text containing various Unicode emojis for testing emoji extraction
- [Code Comment Samples](https://elysiatools.com/en/samples/code-comment-samples): Sample code files with various comment styles for testing comment removal

## Related content

- [CSS Authoring, Layout, and Cascade Workflows](https://elysiatools.com/en/hubs/css-authoring-layout-and-cascade-workflows): Write and review CSS with readable formatting, selector diagnostics, responsive snippets, visual effects, and rendered-intent checks.