Regex to get the last css class

Question

I'd like to pull out the last class from css rules using Regex in javascript.

The regex rule I'm going for is to start searching from the end of the rule e.g. on '.myClass .myOtherClass' and to bring back the first word after the last full stop - so the result there would be '.myOtherClass'

Example css rules I need to match on:

.myClass{color:red;}
.myClass .myOtherClass{color:green;}
#something .somethingElse{color:blue;}
.something #myIdhere{color:purple;}
#myId {color:black}
.myClass1, .myClass2{colour:green}
.myClass span{colour:purple}
.myPseudo:after{}

I can get the rules out on their own without the {} info. So its the regex would be run one each of the rules on their own. e.g. on '.myClass .myOtherClass' on its own. The output from the rules above that I'd like to get is that it's matches like the below:

.myClass
.myOtherClass
.somethingElse
.something
 no match
.myClass2
.myClass
.myPseudo

Can anyone help please?

Answer 1

.*(\.[a-zA-Z0-9]*) 

retrieving the first group gives you what you want for all your test cases.

It works thanks to the greediness of .* which will match as much as possible, leaving the last class to match to the rest of the pattern.

Try it here