Ray Ray - 9 months ago 54
CSS Question

Prepend all CSS selectors

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.)


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


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.