Changing only the 'a' of rgba in a css class

Question

I have an app where certain elements can be confirmed. When they are created, they default to unconfirmed, and then later become confirmed. They can belong to another class A or B.

If they belong to A, I have a css rule that is

.a {
   background-color: red
}

if they belong to B, the css is rule is

.b {
   background-color: blue
}

Right now I have classes for unconfirmed and for confirmed. The classes add opacity of 1.0 if confirmed, and .5 if unconfirmed. My problem is that the .5 affects the text on the element too, which makes it cumbersome to read.

Ideally I could have something like .a { background-color: rgba (255,0,0,X) }

Is it possible to overwrite the alpha value only on another class? I don't want to assign color to the .confirmed or .unconfirmed class because it can change depending on if the class is .a or .b.

possible duplicate of [Is it possible to change only the alpha of a rgba background colour on hover?](http://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover) — davidcondrey, Oct 23 '14 at 06:04
In response to comments. I don't want black background... it needs to change depending on the class, red or blue (view...question...). This question has nothing to do with rgba on hover, but I suppose it's similar in essence. @dfsq thanks. Any possible work around? — Peege151, Oct 23 '14 at 06:06
1. You can make use preprocessors. 2. You can use javascript. — dfsq, Oct 23 '14 at 06:08
I'm adding classes via jquery to elements based on whether they are confirmed or unconfirmed in my database. So i am currently using javascript in that sense. What other way can I use js? Any reading material on prerocessors? I'm not familiar. — Peege151, Oct 23 '14 at 06:10
You could just overwrite the confirmed / unconfirmed style... like: `.unconfirmed.a { background-color: rgba (255,0,0,0.5) } .confirmed.a { background-color: rgba (255,0,0,1) }` afterwards — misterManSam, Oct 23 '14 at 06:10
@misterManSam I suppose that's true. Needed to zoom out on my head there. Thanks. — Peege151, Oct 23 '14 at 06:11

score 1 · Accepted Answer · answered Oct 23 '14 at 06:21

You can't overwrite the background alpha channel only. Good thing you don't need to :)

Just combine your class selectors to style the combination like:

.a.unconfirmed and .a.confirmed

Example

div {
  display: inline-block;
}
.a.unconfirmed {
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 0.5);
}
.a.confirmed {
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 1);
}
.b.unconfirmed {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 0.5);
}
.b.confirmed {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 1);
}

<div class="a confirmed">Confirmed</div>
<div class="a unconfirmed">Unconfimed</div>

<div class="b confirmed">Confirmed</div>
<div class="b unconfirmed">Unconfimed</div>

This is an example of hindsight being super 20/20 haha, but I'm sure will help fellow late night coders =P. Thanks for the answer and the snippet. — Peege151, Oct 23 '14 at 06:23

Changing only the 'a' of rgba in a css class

1 Answers1

Example