# \[Request\] CSS : Changing Group Level Table Header Color

**URL:** <https://forums.knack.com/t/request-css-changing-group-level-table-header-color/6652>\
**Category:** Ask Developers\
**Created:** [September 4, 2019, 10:32am UTC](https://forums.knack.com/t/request-css-changing-group-level-table-header-color/6652 "2019-09-04T10:32:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CatParkins31278](https://avatars.discourse-cdn.com/v4/letter/c/ecae2f/32.png) [@CatParkins31278](https://forums.knack.com/u/CatParkins31278)\
**Post date:** [September 4, 2019, 10:32am UTC](https://forums.knack.com/t/request-css-changing-group-level-table-header-color/6652/1 "2019-09-04T10:32:15Z")

</div>

Hi,  
I feel like I'm really close with this, but could do with some assistance

I have a table with two levels of grouping : Status and Priority Level. For Example :

IN QA  
 Priority  
 Row1  
 Row2  
 Normal  
 Row1  
ACTIVE  
 Priority  
 Row1

I am looking to color the headings for status to make it easier to read  
  
By using the following CSS I can make the first Status column a different color   
 #view\_464 tr.kn-table-group:nth-child(1) \> td:nth-child(1){  
 background-color:#F59C38;  
 }  
  
I assumed that the tr.kn-table-group:nth-child(1) section refered to the level 1 grouping so tried this to color ALL the level headings  
 #view\_464 tr.kn-table-group:nth-child(1) {  
 background-color:#F59C38;  
 }  
  
However this did nothing and reverted back to the default colour. When I inspect the page and trace the CSS path I get the following :  
html body  
#knack-body div  
#knack-dist\_1.kn-content div.kn-scenes.kn-section div  
#kn-scene\_350.kn-scene.kn-container div  
#view\_464.kn-table.kn-view.view\_464 div.kn-table-wrapper table.kn-table.kn-table-table.is-bordered.is-striped.cell-editable.can-overflow-x tbody tr.kn-table-group.kn-group-level-1

And the CSS selctors for each level-1 heading are :  
tr.kn-table-group:nth-child(1)  
tr.kn-table-group:nth-child(9)  
tr.kn-table-group:nth-child(46)

I can only assume that the nth-child number will change according to how many level 2 groups there are so I don't wanto to hard code those values.

How can I change the CSS for specificall the level-1 groupings ?

---

<div class="post-metadata">

**Author:** ![CatParkins31278](https://avatars.discourse-cdn.com/v4/letter/c/ecae2f/32.png) [@CatParkins31278](https://forums.knack.com/u/CatParkins31278)\
**Post date:** [September 11, 2019, 8:01am UTC](https://forums.knack.com/t/request-css-changing-group-level-table-header-color/6652/2 "2019-09-11T08:01:37Z")

</div>

Thank you, Brad. it worked perfectly !

Dammit I was so close :D

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [September 4, 2019, 8:35pm UTC](https://forums.knack.com/t/request-css-changing-group-level-table-header-color/6652/3 "2019-09-04T20:35:36Z")

</div>

Hi Cat - you are close.

Looking at the classes for table group rows they include a group-level included and I think you're wanting to target the .kn-group-level-1 class.

![](https://support.knack.com/hc/user_images/WyplvD9e_4RJfaQSVTrBvQ.png)

So your CSS might be:

```
#view_464 tr.kn-table-group.kn-group-level-1 > td:nth-child(1){
background-color:#F59C38;
}
```