You can inherit CSS colors from parent elements using the inherit or currentColor keywords:
|
1 2 3 |
.someClass { color: inherit } |
This works for border color too:
|
1 2 3 4 5 6 7 |
.someClass { border-color: inherit } /* or using the shorthand: */ .someClass { border: 1px solid currentColor } |
But suppose you’d want to have a semi-transparent color. When setting colors normally you would simply use rgba() to specify the transparency:
|
1 2 3 |
.someClass { border: 1px solid rgba(255,255,255,0.5); } |
But this does not work for inherit or currentColor since rgba does not accept these keywords. But with a little trickery we can use the :before pseudoelement to get the same effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.someClass { color: inherit; position: relative; border: none; } .someClass:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid currentColor; opacity: 0.5; } |
Cool :-)
Thanks – exactly what I was looking for an Accordion