Prepend all CSS selectors

Question

Is there a text filter or javascript/jquery function that will prepend all css selectors in a stylesheet with a something? I am trying to affect just one div with twitter bootstrap but it is affecting the sidebar outside of it, is there anyway to do this? (I do not want to use an iframe.)

EDIT:

All I want, is to be able to prepend an ID "#content" to every selector in a css file.

Answer 1

Your comment under sabithpocker's answer tells me that instead of dynamically changing your styles, you are looking to statically modify your CSS. I think this would be easiest with a regular expression:

Find: ([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
Replace with: $1#content $2

Breakdown of Regex

• ([,|\}][\s$]*) - Finds the } or , from the previous style followed by whitespace (spaces/tabs: \s, newlines: $). The closing brace\comma keeps the regex from looking inside the body of your style.
• [\.#]? - Matches the starting # or . in the style name, if it is present.
• -?[_a-zA-Z]+ - CSS style names can start with an underscore or letters. Also, style names can be prepended by a dash.
• [_a-zA-Z0-9-]* - Matches the rest of the style name. This can be omitted, but it might be nice to know the style name of all the styles that were modified.
• $1#content $2 - The } (or ,) and whitespace is left the way it was found ($1). It is followed by your inserted text #content (note the space), which is then followed by the style name ($2).

I tested this in Notepad++ and it works on my stylesheets.
It should be noted, that if your CSS is not compressed (and is multiline), you will need editor that supports multi-line regular expressions (Notepad++ does).

Answer 2

Improved upon RustyTheBoyRobot and BoltClock♦ answer to allow for comments and media queries.

Find: ([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)

Replace with: $1$2 #content $3

Edit

It's been brought to my attention that the code I supplied only works for PHP.

Here is an improved version that should work in Javascript and PHP

Regex Pattern*

(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)

Full Example*

var outputString = inputString.replace(
    /(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)/g,
    "$1$2 #content $3"
);

This should also fix @Mariano Martinez Peck issue with background: linear-gradient(to bottom, #ae9e9e, #454545); and the issue with @font-face

Answer 3

This can be done easier with the use of SCSS. Simply take your existing CSS, nest it all with a #my-new-selector { ... } and then run it through a SCSS to CSS compiler (there are online tools that can do this without you having to install anything.