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
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
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.
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.
I have a stylesheet:
a,b,c { stuff
lots of it
}
b { more stuff }
.test { even more }
I want a regular expression to break it up into each of the three parts, separating from '}' to '}' should work alright for my needs (except the first case obviously).
In Ruby 1.9, you could
result = subject.split(/(?<=\})/)
i.e., split the string at a position following a }. Ruby 1.8 doesn't support lookbehind assertions, though, so it won't work there. And of course you'll be running into problems with nested braces, but you said that this shouldn't be a problem with your data.
In Ruby 1.8 (can't try it here), the following should work:
result = subject.split(/(\})/)
although now the closing braces won't be part of the matched elements anymore. So test {a} test2 {b} will be split into test {a, }, test2 {b, } plus an empty string.
It may be inappropriate in your case, but you could use a CSS parser to split your CSS file by tokens and operate on them independently and harmlessly.
css_parser (with this guide);
CSSPool (I recommend this one just because you only need to obtain certain selectors from your CSS; this one is like a SAX parser for CSS).
.scan(/.+?\}/m)