Question: Overriding background-color of the .gantt-row class below is easily done by adding a style attribute to the DIV:

```
<div style="background-color: blue" class="gantt-row">

```

Is it also possible to override the background-color of the gantt-row:nth-child selectors from within the markup? Or is it necessary to use jQuery for this?

```
.gantt-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    background-color: #fff;
}

.gantt-row:nth-child(even) {
    background-color: #F6F6F6;
}

.gantt-row:nth-child(even) .gantt-row-name {
    background-color: #F6F6F6;
}

```

Answer: 
You can't directly affect the style of the nth-child element like that, but you can set CSS variables which can be picked up when styling a property.

In this snippet a parent container can be styled inline with a --bg variable setting and this can be picked up by the settings for the nth-child(even).

```css
.gantt-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  background-color: #fff;
}

.gantt-row:nth-child(even) {
  background-color: var(--bg);
}

.gantt-row:nth-child(even) .gantt-row-name {
  background-color: var(--bg);
}
```

```html
<div style="--bg: blue;">
  <div class="gantt-row">odd</div>
  <div class="gantt-row">even</div>
</div>
```

Note, it doesn't have to be a direct parent, any ancestor will do.
```
<div class="wrapper">
<div class="gantt-row check checker">
  <div class="gantt-row-name">North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" class="gantt-bars">
    <li style="grid-column: 8/16;" class="tooltip">
      <a href="https://www.marine.com">World Navigator</a>
      <span class="tooltiptext">Tooltip text</span>
    </li>
  </ul>
</div>
<div class="gantt-row check checker">
  <div class="gantt-row-name">North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" class="gantt-bars">
    <li style="grid-column: 8/16;" class="tooltip">
      <a href="https://www.marine.com">World Navigator</a>
      <span class="tooltiptext">Tooltip text</span>
    </li>
  </ul>
</div>
<div class="gantt-row check checker">
  <div class="gantt-row-name">North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" class="gantt-bars">
    <li style="grid-column: 8/16;" class="tooltip">
      <a href="https://www.marine.com">World Navigator</a>
      <span class="tooltiptext">Tooltip text</span>
    </li>
  </ul>
</div>

</div>

```

```
.gantt-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    background-color: #fff;
}

.wrapper .gantt-row:nth-child(even) {
    background-color: #F6F6F6;
}

.wrapper .gantt-row:nth-child(even) .gantt-row-name {
    background-color: #F6F6F6;
}

.wrapper .gantt-row:nth-child(2) {
    background-color: red;
}

.wrapper .gantt-row:nth-child(2) .gantt-row-name {
    background-color: red;
}

.wrapper .gantt-row.check.checker:nth-child(2) {
    background-color: red;
}

.wrapper .gantt-row.check.checker:nth-child(2) .gantt-row-name {
    background-color: red;
}

```