How to search for a CSS property of class using VS Code Regex

Question

I would like to create a Regex expression to be used as search query in VS Code, in order to do some overrides on an existing CSS files.

My scenario is close to this:

.myClass {
  font-size:10px;
  position:absolute;
}

What is the correct Regex to search all occurrences of .myClass containing the 'font-size:10px' property?

I.e I don't know what's needed in order to complete the regex expression here, and let VS Code search for the 'font-size:10px;' substring as well.

/.myClass \{ \}/

I'm not sure what I have to add on the regex below in order to extract the 'font-size:10px': /.myClass \{ \} — user3059415
– user3059415, Commented Jul 21, 2020 at 16:58
Is font-size:10px always the first attribute? Then, something like \.myClass\s*\{\s*font-size:10px;[\w\W]*?\} might work. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Jul 21, 2020 at 17:03
@WiktorStribiżew no 'font-size:10px' is not always the first. — user3059415
– user3059415, Commented Jul 21, 2020 at 17:14

Ryszard Czech · Accepted Answer · 2020-07-21 19:54:04Z

Use

\.myClass\s*\{[^{}\r]*font-size:10px;[^{}]*\}

See proof. The expression will match .myClass { and then any characters other than curly brackets up to font-size:10px;, then any text other than the same brackets till a close curly bracket.

EXPLANATION

NODE                     EXPLANATION
--------------------------------------------------------------------------------
  \.                       '.'
--------------------------------------------------------------------------------
  myClass                  'myClass'
--------------------------------------------------------------------------------
  \s*                      whitespace (\n, \r, \t, \f, and " ") (0 or
                           more times (matching the most amount
                           possible))
--------------------------------------------------------------------------------
  \{                       '{'
--------------------------------------------------------------------------------
  [^{}\r]*                 any character except: '{', '}', including linebreaks
                           (0 or more times matching the most amount possible)
--------------------------------------------------------------------------------
  font-size:10px;          'font-size:10px;'
--------------------------------------------------------------------------------
  [^{}]*                   any character except: '{', '}' (0 or more
                           times (matching the most amount possible))
--------------------------------------------------------------------------------
  \}                       '}'

Collectives™ on Stack Overflow

How to search for a CSS property of class using VS Code Regex

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related