Sublime - CSS - how to auto add .class for each section in the whole code?

Question

I wonder if there is any way to auto add class name (eg ".header") before each section in CSS code using Sublime?

Example:

ul {
    ...;
}
a {
    ...;
}
h1 {
    ...;
}

Transform this to:

.header ul {
    ...;
}
.header a {
    ...;
}
.header h1 {
    ...;
}

Kindly help :)

Answer 1

If there are only a few instances where you want to apply this change, I'd recommend holding down ctrl & clicking on each location, this'll provide you with multiple carets that all respond to the same input, so you can type .header and all locations selected will be affected.

Or you could use find & replace with some regex to do it for you, for example

Find: ^([a-z0-9]{1,} \\{)

Replace with: .header \\1

This'll match any element selectors such as h1, a, p, li etc... followed by a space and {, and precede them with ".header"

Answer 2

1) ctrl + f / cmd + f

2) check 'regular expression'

3) enter ^[a-z0-9]* {

4) find all

5) replace