Prepare all CSS selectors

Question

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

EDIT:

All I want is the ability to add the identifier "#content" for each selector in the css file.

Answer 1

Your comment in response to sabithpocker tells me that instead of dynamically changing your styles, you are trying to statically change your CSS. I think this would be easiest with a regex:

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

Regular Expression Distribution

• ([,|\}][\s$]*) - Finds } or , from the previous style, followed by spaces (spaces / tabs: \s , new lines: $ ). The closing curly bracket \ comma does not allow the regular expression to look into the body of your style.
• [\.#]? - matches the initial # or . in the name of the style, if present.
• -?[_a-zA-Z]+ - CSS style names can begin with underscores or letters. In addition, dash styles can be added.
• [_a-zA-Z0-9-]* - Matches the rest of the style name. This can be omitted, but it would be nice to know the style name for all styles that have been changed.
• $1#content $2 - } (or , ) and spaces are left as it was found ( $1 ). It is followed by the entered text #content (note the space), followed by the name of the style ( $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 multi-line), you will need an editor that supports multi-line regular expressions (Notepad ++ does).

Answer 2

This can be made easier using SCSS. Just grab your existing CSS, paste it all with # my-new-selector {...}, and then run it through the CSS SCSS compiler (there are online tools that can do this if you don't need to install anything.

Answer 3

Workaround (if you really need to do this):

• Wait until windows and all styles are loaded.
• Take the elements you want to use inapplicable styles.
• Get their styles and apply them inline.

To implement a cross browser, you can use the jquery plugin shown below:

 $('#mydiv *').each(function(){ $(this).css($(this).getStyleObject()); }); 

Then disable the original stylesheet

 document.stylesheets[n].disabled = true; //or use this : $('link[title=mystyle]')[0].disabled=true; //n should be index of style sheet -- counts external + internal style sheets 

Plugin:

 /* * getStyleObject Plugin for jQuery JavaScript Library * From: http://upshots.org/?p=112 */ (function($){ $.fn.getStyleObject = function(){ var dom = this.get(0); var style; var returns = {}; if(window.getComputedStyle){ var camelize = function(a,b){ return b.toUpperCase(); }; style = window.getComputedStyle(dom, null); for(var i = 0, l = style.length; i < l; i++){ var prop = style[i]; var camel = prop.replace(/\-([az])/g, camelize); var val = style.getPropertyValue(prop); returns[camel] = val; }; return returns; }; if(style = dom.currentStyle){ for(var prop in style){ returns[prop] = style[prop]; }; return returns; }; return this.css(); } })(jQuery); 

Answer 4

No stylesheet - this is just a copy paste file. you must wrap everything you want with a unique identifier, and then access this with this unique identifier.

Answer 5

Improved on RustyTheBoyRobot and BoltClock ♦ Reply to allow comments and media queries.

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

Replace with: $1$2 #content $3

Edit

I was informed that the code I provided only works for PHP.

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

Regular expression 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 the @Mariano Martinez Peck problem with background: linear-gradient(to bottom, #ae9e9e, #454545); and the problem with @font-face