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.

Answer 4

A workaround (if you really need this done this way):

1. Wait till window loads and all styles are applied
2. Grab the elements you want the applied styles intact
3. Get their styles and apply it inline

For a cross browser implementation you can use the jquery plugin shown below:

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

Then disable the original style sheet

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(/\-([a-z])/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 5

No the stylesheet is just a copy paste file. you have to wrap all you want with a unique identifier and then refer to this using this unique identifier.