Regex to extract CSS classnames and IDs

Question

I have some CSS and I'm looking to create a list of all the class names and identifiers. This is what I have:

var TheList = new List<string>();
var Test2 = Regex.Matches(TheCSS, ".-?[_a-zA-Z]+[_a-zA-Z0-9-]*(?=[^}]*\\{)");

foreach(Match m in Test2)
{
    TheList.Add(m.Value);
}

The problem is that there are some unwanted elements:

body
:hover
select
input
label
[for
input
[type
'radio

I've tried with several regex expressions that I've found online; this one is the closest but it's not perfect yet. Basically, it needs to include only elements that begin with # and . so as to avoid body and [type and then not include pseudo-selectors like :hover

What do I need to change in the regex to make it work?

Prepare a sample on gskinner.com/RegExr with your testcase.

Niels Keurentjes
– Niels Keurentjes

2014-01-09 13:10:26 +00:00
Commented Jan 9, 2014 at 13:10 — Niels Keurentjes
– Niels Keurentjes, Commented Jan 9, 2014 at 13:10
@NielsKeurentjes: here you go: regexr.com?37uc4

frenchie
– frenchie

2014-01-09 13:17:10 +00:00
Commented Jan 9, 2014 at 13:17 — frenchie
– frenchie, Commented Jan 9, 2014 at 13:17

Niels Keurentjes · Accepted Answer · 2014-01-09 13:23:30Z

5

Following the CSS standards, a class or ID must match [_A-Za-z0-9\-]+. A class or ID thus matches that string prefixed directly by either a # or ..

After determining that all you need to do is ensure that it's followed by a { before an } occurs to make sure you're outside a rule.

The resulting regexp would then be: ([\.#][_A-Za-z0-9\-]+)[^}]*{

Your sample case. Same regexp applied to Facebook CSS.

answered Jan 9, 2014 at 13:23

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frenchie Over a year ago

Ok, this looks great. I changed it to ([\\.#][_A-Za-z0-9\\-]+)[^}][*{] to make sure to include * as an ending possibility.

mucsi96 Over a year ago

It doesn't work if a selector contains multiple classes or ids. It will match only the first id or class from a selector. So this way you cannot extract all of them.

mucsi96 Over a year ago

Based on that a better solution would be to use a positive lookahead: ([\.#][_A-Za-z0-9\-]+)(?=[^}]+{)

Collectives™ on Stack Overflow

Regex to extract CSS classnames and IDs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related