-2

I am trying to setup a table that will have X number of rows, with each row's background color set by ID (or class, either way... this is to identify each row's category). On top of that, I would like to use nth-child to change the opacity for the background of each even row, so that if there are a lot of rows for a particular category, the user can easily skim the table. I setup some code on JSFiddle, but the entire row's content (text, background, border) is affected, not just the background (which makes sense, of course).

#a {   background:lightblue; }
#b {   background:orange; }
#c {   background:lightgreen; }
.row:nth-child(even) {
  opacity: .60;
}

Full code here

So far, all of the solutions I have found either don't address the different row background colors, or involve a convoluted use of multiple layers that create issues with the nth-child selector. It also appears most of the answers for this are from awhile ago, so I am hoping that there is a more recent solution.

Any help or advice is greatly appreciated!

chipsterva69
  • 73
  • 8
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/demo doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Jan 09 '19 at 16:15
  • 2
    Alos, if it's an issue of the background having opacity, **use an RGBA color** – Paulie_D Jan 09 '19 at 16:17
  • @Paulie_D - thanks for the info on the link. I was wondering why the Stack Snippet window popped up... makes sense once spelled out. I will keep that in mind for next time. And I had already tried the RBGA setup, but that in and of itself didn't correct the issue, so I flipped my code back to hex. Thanks! – chipsterva69 Jan 09 '19 at 16:39

1 Answers1

1

Opacity is affecting all of the properties of the row because that's what you're selecting. To only affect the background color, you can change your .row:nth-child(event) selector to the following CSS:

.row.a:nth-child(even) {
  background-color: rgb(173, 216, 230, .6);
}
.row.b:nth-child(even) {
  background-color: rgb(255, 165, 0, .6);
}
.row.c:nth-child(even) {
  background-color: rgb(144, 238, 144, .6);
}

You should adjust your HTML to use classes instead of IDs (see https://css-tricks.com/the-difference-between-id-and-class/ for more info):

<div class="container">
  <div id="table">
    <div class="row a">
      Row 1 / Cat 1
    </div>
    <div class="row a">
      Row 2 / Cat 1
    </div>
    <div class="row a">
      Row 3 / Cat 1
    </div>
    <div class="row b">
      Row 4 / Cat 2
    </div>
    <div class="row b">
      Row 5 / Cat 2
    </div>
    <div class="row c">
      Row 6 / Cat 3
    </div>
    <div class="row c">
      Row 7 / Cat 3
    </div>
    <div class="row c">
      Row 8 / Cat 3
    </div>
  </div>
</div>

And then your final CSS would be:

.container {   padding: 20px; }
.row {   padding: 5px 15px;  border-bottom: 1px solid black; }
.a {   background-color: rgb(173, 216, 230, 1); /*lightblue*/ }
.b {   background-color: rgb(255, 165, 0, 1); /*orange*/ }
.c {   background-color: rgb(144, 238, 144, 1); /*lightgreen*/ }
.row:nth-child(1) {   border-top: 1px solid black; }

.row.a:nth-child(even) {
  background-color: rgb(173, 216, 230, .6); /*lightblue less opaque*/
}
.row.b:nth-child(even) {
  background-color: rgb(255, 165, 0, .6); /*orange less opaque*/
}
.row.c:nth-child(even) {
  background-color: rgb(144, 238, 144, .6); /*lightgreen less opaque*/
}

See https://jsfiddle.net/WOUNDEDStevenJones/u46nkjb0/1/ for a working version

WOUNDEDStevenJones
  • 5,150
  • 6
  • 41
  • 53