3

I want to use regular expressions to define a complex set of corner options with regard to the border radius

I want a way to define the class corner* without the need to have each combination in the html or css

example:

this is my css as it is now:

.corner-tl {
    border-top-left-radius:8px;
}

.corner-tr {
    border-top-right-radius:8px;
}

.corner-bl {
    border-bottom-left-radius:8px;
}

.corner-br {
    border-bottom-right-radius:8px;
}

however I want to be able to apply all, some or none of the above as shown below, a box with only top left and top right is done simply with the following code:

 <div class="corner-tl corner-tr">

These is the obvious solution - however I will be applying the same logic to many things like padding and margin, border etc so the classes will become very long. The reason for doing it this way is so the actual value (8px) can be manipulated via php to every and all instances for my CMS. What I would rather use is this:

 <div class="corner-tl-tr">

is there a way within css to do this using a regular expression so that anything with 'corner' and anything after it can combine to add any amount of corner effects to the single class?

without knowing how to do the expression what I want is this:

 .corner*-tl* {
    border-top-left-radius:8px;
}

for each corner where the * is anything before or after but only after 'corner'. This way I only need 4 classes for the many possible combinations.

Example I want to use corner-tl-tr-br in my html to create a div with a radius in top left, top right and bottom right. I also want to be able to use corner-tr-tl-br to create the same, but without writing a class for each variation. If I can't find a solution I will be forced to use inline styles as the possible combinations are lots. Also my database will be storing these values which could be added or not added in any order for any div over the entire site. It would be nice to do this in four lines where each line can be combined into one. It may not even be possible but the examples so far only show me single classes, not combined ones.

If I can help it, I don't want to have to make many styles, like - corner, corner-tl, corner-tr, corner-bl, corner-br, corner-tl-tr, corner-tr-tl, corner-tl-bl, corner-bl-tl, corner-tl-br, corner-br-tl and so on... Theoretically corner on its own is not required as that will have no radius set, so it is the same in html as not applying the class but may be needed to achieve the others, the rest however are possible in my system. I want to be able to apply any combination in a single class that has an expression in css for the 4 options.

fishboy
  • 51
  • 7
  • http://stackoverflow.com/a/5110337/2136840 – ChicagoRedSox Feb 24 '14 at 17:55
  • Why not just add another class `corner` that's used for all the features common to all corners? – Barmar Feb 24 '14 at 17:56
  • What I think I am looking for is a class with 2 wildcards, so I can use both corner-tl, Or corner-tl-br or even corner-br-tl-bl if I so choose. What I want is to set up ending to work in any combo and combine them to the class 'corner' – fishboy Feb 24 '14 at 20:01
  • Also please understand that what I need is relative to simplify the html - not the css, so I don't need solutions for styling corners or separate divs, I am hopefully looking for a solution that gives me 4 class definitions, one for each corner that can be combined in any order, to make the 64 possibilities in html without the need for adding four separate classes to a div if I need all corners. – fishboy Feb 24 '14 at 23:08
  • There may be no common features between corners other than the start of the namespace hence my need. This is @barmar – fishboy Feb 24 '14 at 23:35
  • Sorry, I misunderstood the question, I thought all 4 blocks had the same style. Maybe you can do something with LESS. – Barmar Feb 25 '14 at 00:38

1 Answers1

7

Starts with

[class^="corner-"] {

}

contains

[class*="corner-"] {

}

Ends with

[class$="corner-"] {

}
Barmar
  • 741,623
  • 53
  • 500
  • 612
seemly
  • 1,090
  • 10
  • 20
  • 2
    Yes. ...and for what the OP wants more precisely: `[class*="-tl"]` and `[class*="-tr"]` – Faust Feb 24 '14 at 17:58
  • Am I correct in thinking then that to specify my top left corner in css I need a combination of both answers? Such as [class^="corner-"][class*="-tl"]{border-top-left-radius:8px; } – fishboy Feb 24 '14 at 19:55
  • your case is a very basic example, but for example purposes (and this is a really rubbish example, but still): http://jsfiddle.net/ZnnLB/ – seemly Feb 24 '14 at 20:48
  • That example does not do what I need, I need one that allows any combo, but in the same div. I have added an example to the original question. – fishboy Feb 24 '14 at 22:54
  • I don't really understand the question, now. Your example is still pretty basic and I don't really understand the end result you are trying to achieve. – seemly Feb 25 '14 at 09:47