I have to match all css definitions with name "test" and with color:gray.
For example:
a.test { color:grey; } but also .test { color:grey;}
or a.test:affter, a.test { font-size: 10px; color: gray;}
so it have to take care of multiple \s\r\n and others.
What I already got:
test(\s|\r|\n|[:a-zA-Z()0-9])*\{([a-zA-Z:,\s\n\r-0-1;]*)color[\s\n\r:]*gray([a-zA-Z:,\s\n\r-0-1;]*)\}
but it isn't working in some places: http://regexr.com?32191.
Please help :)
Solution from #nhahtdh, best for me
\.test[:a-zA-Z()0-9\s.,]*\{[a-zA-Z:,\s0-1;-]*color[\s:]*gray([a-zA-Z:,\s0-1;-]*)\}
I made a fairly simple one:
[^{]*\.test(?:{|[ :.][^{]*{)[^}]*color[ \n\r]*:[ \n\r]*gray *;[^}]*}
This should match your specification, but won't catch any CSS errors.
http://regexr.com?321ah
This regex matches your test cases.
[^\r]*\.test(\s|\r|\n|[:a-zA-Z()0-9])?[^{]*\{([a-zA-Z:,\s\n\r-0-1;]*)color[\s\n\r:]*gray([a-zA-Z:,\s\n\r-0-1;]*)\}
http://regexr.com?32197
The issue is way more complex though. There might be arbitrary characters in different context such as urls, filters and so on. As far as you need to match only these very specific cases, it ought to work.
Related
I want to create a regex, in order to find out if an entry exists.
The Entry is in a CSS File.
Unfortunately different developers tend to write them in different manners, so I want to create a regex, that matches all this individualities.
I hope somebody can help me.
body {
margin: 0; }
body
{
margin: 0;
}
body{margin:0;}
There are too many variables that could makes your regexp fails: body could have an id, a class, and/or be part of a bigger list. You could have comments, the ";" could be missing, you could have multiple rules inside.
Unless you want to match exactly the three strings above, I strongly suggest to use a css parser that returns an AST. Something like: https://github.com/csstree/csstree
Something like this seems to work for your examples, as well as any other valid synthax I can think of :
^\s*[\.\#]{0}body(\s|\n)*\{[^\}]*(\s|\n)*margin(\s|\n)*\:\s*0\s*\;[^\}]*\}
Try here : https://regex101.com/r/GbIbdE/1
In CSS I have to specify a specific class (e.g., .myClass) but exclude instances that have either one of two classes (e.g., not .foo nor .bar).
I looked into CSS3 new :not() syntax, but I am not sure how to specify the two classes that I don't want to use. I believe this is incorrect (it did not work for me). However, it seems like a concise way to show what I am trying to do:
.myClass:not(.foo):not(.bar) {
...
}
Just separate them with a comma:
.myClass:not(.foo, .bar){
...
}
Use a comma in-between them:
.myClass:not(.foo, .bar) {
...
}
Source: http://devsnippets.com/article/5-advanced-css-pseudo-class.html
I know there's a way to select different ids with css to apply the same style., but i can't remember how.
What i mean is apply the same style to the divs below:
content-target1
content-target2
content-target3
content-target4
Any idea about this?
You can just use multiple ID selectors:
#content-target1, #content-target2, #content-target3, #content-target4
If you don't want to repeat the ID selectors, and/or you want to match them only by their common prefix, you can use an attribute selector instead (losing a bit of specificity, as ID selectors don't have wildcard matching capabilities like attribute selectors do):
div[id^="content-target"]
"#id" is how you select an id, and "sel1, sel2" is how you select either sel1 or sel2 for a rule:
#content-target1, #content-target2 { background: red; }
Could you just do
#content-target1, #content-target2, #content-target3, #content-target4 {
CSS HERE
}
edit: forgot my #s
I'm trying to expand a minified CSS file (don't ask) to make it human readable.
I've managed to get most of the expanding done but I'm stuck at a very weird case that I can't figure out.
I have CSS that looks like this:
.innerRight {
border:0;color:#000;width:auto;padding-top:0;margin:0;
}
a {
color:#000;text-decoration:underline;font-size:12px;
}
p,small,ul,li {
color:#000;font-size:12px;padding:0;
}
I've tried (.+):(.+); as the search and \t\1: \2;\n as the replace. The find RegEx is valid, the only problem is that it matches the entire line of attributes. I've tried the non-greedy character, but I must not be putting it in the right place.
What the above find RegEx matches is:
0: border:0;color:#000;width:auto;padding-top:0;margin:0;
1: color:#000;text-decoration:underline;font-size:12px;
2: color:#000;font-size:12px;padding:0;
While those are technically correct matches, I need it to match border:0;, color:#000;, etc separately for my replace to work.
Try this - use non-greedy matching. This works for me
(.+?):(.+?);
Forget the colon. Just replace all semicolons with ";\n".
In Javascript, for example, you could write:
text = text.replace(/;/gm,";\n");
I would further refine that to address leading-space issues, etc., but this will put every style rule on its own line.
How can one insert a Unicode string CSS into CleverCSS?
In particular, how could one produce the following CSS using CleverCSS:
li:after {
content: "\00BB \0020";
}
I've figured out CleverCSS's parsing rules, but suffice that the permutations I've thought sensible have failed, for example:
li:
content: "\\00BB \\0020" // becomes content: 'BB 0'
EDIT: My other examples and the rest of my post weren't saved. Suffice to say that I had a longer list of examples that's missing.
I'd be grateful for any thoughts and input.
Brian
EDIT: I noted that inserting the unicode was one of the problems (once you start uploading CSS with utf-8 encoding it's fine). The wrapping of quote characters is another, which I solved that with something crazy likeso:
content: "'".string() + " ".string() ».string() + "'".string()
Hope that helps someone else.
This may be silly, but why still bother with escape sequences when you can just type/paste the actual characters? "A CSS style sheet is a sequence of characters from the Universal Character Set".
That is a lot easier on the eye, and is especially useful when maintaining existing code.
Or is CleverCSS not Unicode-enabled?
In looking at the code (CleverCSS 0.1) it would appear that the partial regular expression _r_string (defined on line 414) is where you would need to start. This is used to define several other REs, including _string_re which is used in the parsing rules (line 1374). This leads us to process_string() (line 1359) which looks like it was meant to accept Unicode.
Unfortunately, hand-built parsers tend to get a bit strange and the code is not exactly swimming in comments. If you really need to do this, I would focus on process_string() and put a bunch of before/after print statements in there and see if you can understand the goes-intos and goes-outofs.
You might also try bribing the original author with beer or ??? Good luck.