Extract CSS class names from stylesheets

This tool extracts CSS class names from your stylesheets. It provides flexible options so you can extract every class name, extract only those that match specified substrings, extract all except those containing specified substrings, or format the extracted class names using a custom format. Simply enter your CSS code and select the extraction mode that suits your needs.

Input (CSS Code)

Extracted CSS Class Names

Extraction Modes:

Extract All Class Names
Extracts every CSS class name found in the stylesheet.

Extract Only Class Names Matching Specified Substrings
Extracts only the class names that contain the specified substring(s). Enter a comma‑separated list (e.g., header, nav).

Extract All Except Class Names Containing Specified Substrings
Extracts every class name except those that contain the specified substring(s). Enter a comma‑separated list (e.g., temp, demo).

Extract Class Names with Custom Format
Extracts each class name and formats it using a custom format. Use {class} as a placeholder for the class name.

Examples:

Extract All Class Names

Extracts every class name from the provided CSS code.

Before:

.container { display: flex; }
.header, .footer { background: #fff; }
.navbar-item { padding: 10px; }

After:

container
header
footer
navbar-item

Extract Only Class Names Matching Specified Substrings

Only extracts class names that contain the specified substring (e.g., "nav").

Before:

.container { display: flex; }
.header, .footer { background: #fff; }
.navbar-item { padding: 10px; }

After (specifying "nav"):

navbar-item

Extract All Except Class Names Containing Specified Substrings

Extracts every class name except those containing the specified substring (e.g., "footer").

Before:

.container { display: flex; }
.header, .footer { background: #fff; }
.navbar-item { padding: 10px; }

After (excluding "footer"):

container
header
navbar-item

Extract Class Names with Custom Format

Each extracted class name is formatted using a custom format.

Before:

.container { display: flex; }
.header, .footer { background: #fff; }

After (format "Class: {class}"):

Class: container
Class: header
Class: footer