How to select via regex all class notations in css file


Tags: css,regex

Problem :

By having a css file with css rules, I'd like to select only css class (i.e.) .tblGenFixed but not css values for a rule (i.e.) opacity: 0.3 .

This is my regex: /(\.([\w_]+))/g

This is my alternative solution but it doesn't work /(?!\{)(\.([\w_]+))(?!\})/g

I have set an example in regex101 here https://regex101.com/r/gG4nN4/1

How can I ignore css rule values ?



Solution :

See this : Which characters are valid in CSS class names/selectors?

A value will have a digit after the dot. Luckily, valid CSS class names cannot start with a digit :)

Your regexp has to match a dot first, then a letter or - or _

! if you look for whitespace before the dot, a value like .5 will match ...

Try this one : (\.([a-zA-Z_-]{1}[\w-_]+))

Edit :

See this too : Regex to match a CSS class name

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Relevant quote :

Basically, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must be a letter or underscore, and the name must be at least 2 characters long.


    CSS Howto..

    How to assign inner shadow to inputs in CSS

    How to align buttons below and right-aligned to a HTML list?

    How to do two border upon one div tag by css or by css3? [duplicate]

    CSS Flexbox: how to change the width of the element

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to activate a CSS animation only when hovering - without javascript

    How to make an anchor fill the height of its containing div

    How Should I Display This Background Using CSS?

    How to draw heart using HTML/CSS table?

    slide show with bootstrap

    How can I memorize all CSS shorthands?

    How to align CSS Input type Text Placeholder Image

    How do you keep zoom between pages consistent? via CSS?

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to set body attribute in css using angularjs?

    How to show a low resolution pictures when downloading high resolution? [closed]

    CSS: How the backgrounds can extend the border and overlap?

    How can I add a border INSIDE this element?

    Google font shows boxes in Internet Explorer 8 - IE 8

    In firebug, how do I find out all of the css styles being applied to a particular element?

    How to get a style property from a css class and set it to another css class?

    How to add mouse hover properties to pie drawn on a node in d3?

    css - how to setup image editing page

    How to avoid the pain of CSS multi-browser compatibility?

    How to apply CSS style for getting shadow for text area

    How can i integrate php to html table

    how to put marquee div at the back of another none marquee div?

    How to slow down the last few frames in a CSS sprite animation?

    How to force an empty page in a paged HTML document?

    How to make div scalable by using percentage in CSS