Regex to match a CSS class name

Question

I am trying to write a regex that matches a valid CSS class name structure. I have this so far:

$pattern = \"([A-Za-z]*\\.[A-Za-z]+\\s*{)\";

$regex = preg_m         


        

Answer 1

Have a look at http://www.w3.org/TR/CSS21/grammar.html#scanner

According to this grammar and the post Which characters are valid in CSS class names/selectors? this should be the right pattern to scan for css classes:

\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{

Note: Tag names are not required as prefix for classes in css. Just .hello { border: 1; } is also valid.

Answer 2

This regex:

/(\w+)?(\s*>\s*)?(#\w+)?\s*(\.\w+)?\s*{/gm

will match any of the following:

p.my_class{}
p.thisclas45{}
.simple_class{}
tag#id.class{}
tag > #id{}

You can play around with it, on RegExr, here.