current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I need to edit my css "string" and add #holder selector before every single selector. For example;

I want to change this css string; 

/* the css file with comments */ 
.header ul, .footer #div, .selector3 a
{
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.selector4, .selector5 ul > li, .selector6 a:hover
{
    text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    -moz-text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    -webkit-text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

as 

/* the css file with comments */ 
#holder .header ul, #holder .footer #div, #holder .selector3 a
{
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#holder .selector4, #holder .selector5 ul > li, #holder .selector6 a:hover
{
    text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    -moz-text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    -webkit-text-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

I have used this regex to minify the string and it works fine so you can just ignore the comment lines.

preg_replace('@({)\s+|(\;)\s+|/\*.+?\*\/|\R@is', '$1$2 ', $css);

I'm searching a regex method to do it but any other solution also would be appreciated. Thanks in advance.

share|improve this question
    
Do you need to replace every class selector? Or only a select few known ones? –  remus Dec 8 '13 at 1:00
    
there are many diff. selectors in my css and i have to customize the code for specific part of the page such as #holder. So the answer is yes i need to replace every selector. –  user2360754 Dec 8 '13 at 1:03
    
That's going to be very difficult to do as one regex. –  Mathew Foscarini Dec 8 '13 at 1:04
    
try lesscss.org –  Mathew Foscarini Dec 8 '13 at 1:04
    
or this sass-lang.com –  Mathew Foscarini Dec 8 '13 at 1:05

2 Answers 2

up vote 1 down vote accepted

You can do this:

$pat = '~(?>/\*(?>[^*]++|\*(?!/))*+\*/|{[^}]*+})(*SKIP)(?!)|[^\s,{/][^,{/]++~';
$css = preg_replace($pat, '#holder $0', $css);

The idea is to avoid comments and content inside curly brackets, then you can easily find all selectors with [^\s,{/][^,{/]++.

To do that you put in a group the subpatterns for comments (i.e. /\*(?>[^*]++|\*(?!/))*+\*/) and for content inside curly brackets (i.e. {[^}]*+}), then you force the pattern to fail and forbid backtracking in the matched substrings.

(*SKIP)(?!) is used for that. (*SKIP) forbid to backtrack in all the matched content on his left if the subpattern will fail later. (?!) forces the subpattern to fail ("not followed by nothing" is always false).

share|improve this answer
up vote 1 down vote

You have two choices:

Either you are replacing every class selector, in which case you use:

(\.[\w_\-]+)\b -- example: http://regex101.com/r/kM3dK9

Or you're going to need to specify which ones you're replacing:

(\.(selector4|selector_5|other6))\b -- example: http://regex101.com/r/aC6dR3

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.