0

I just found that we can use regular expression in CSS, and found this helping URL :- http://www.w3.org/TR/selectors/#attribute-substrings

But I couldnot find my answer over there.

My Question is can i use something like

s* {
 margin : $1px;
}

* for any data there and using it with $1.

That says, Whatever is available after s put in before px.

Thanks

John Cargo
  • 1,839
  • 2
  • 29
  • 59
  • 1
    The link you've posted doesn't mention regular expressions at all. CSS selectors have nothing to do with regular expressions. – Prinzhorn Jul 05 '14 at 11:46

3 Answers3

1

You can do something like this

#container div[id^='a'] {
    border: 1px solid black;  
}

Check: W3

pr0metheus
  • 488
  • 6
  • 14
0

Firstly, you're misinterpreting the spec. You can't use patterns like that. You can do things like

*[attr*="string"]

and it will match any element which has an attribute attr with string somewhere in the value. However, the first * just means "any element" here, and the second * means "substring anywhere in the value". There's no actual regular expression pattern matching going on, so the matched value would always be string in this case.

And secondly, no, you can't do any kind of substitution like that in CSS. If you want to do that kind of thing you might want to look into something like LESS, Sass or Stylus.

CupawnTae
  • 14,192
  • 3
  • 29
  • 60
  • Welcome. I updated it slightly because there is another use of * that I hadn't accounted for originally. – CupawnTae Jul 05 '14 at 12:05
0

No you can't: a selector will match or not according to a regular expression and that's it.
You can't reuse it in a declaration as part of a value as in your example.

You could use a preprocessor (LESS, Sass or Stylus) with a for loop if you want to write something like:

.mt1 { margin-top: 10px }
.mt2 { margin-top: 20px }
.mt3 { margin-top: 30px }

I'm not even sure there's a for loop in each of them (because it's barely needed)

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • it's not a regular expression match – CupawnTae Jul 05 '14 at 11:47
  • Not sure about SASS or Stylus, but LESS supports loops :) – Harry Jul 05 '14 at 11:53
  • @CupawnTae Right, I meant "regexp at its simplest level" but it isn't even that; just an expression that borrowed the well-known ^, * and $ from regexp – FelipeAls Jul 05 '14 at 11:53
  • @Harry Yeah, just saw [loop through array of values in LESS](http://stackoverflow.com/questions/21440789/loop-through-array-of-values-in-less). Interesting but that's the kind of feature I avoid ;) (hard to read, will easily bloat my CSS with unneeded rules, etc – FelipeAls Jul 05 '14 at 12:01
  • @FelipeAls: True, I too think that CSS should remain simple. But yeah sometimes you need loops when you want the same properties/rules to be applied to multiple items (say like media queries etc). – Harry Jul 05 '14 at 12:02
  • 1
    @FelipeAls well, agreed that they borrowed `^` and `$` from regex, but `*` has a different meaning - in regex it's 'zero or more occurrences of the preceding wotsit'. `*` must be the most abused character across different pattern matching algorithms - means similar but crucially different things in different places. – CupawnTae Jul 05 '14 at 12:08