Overriding 'nth-child' CSS property from the markup-CodePudding

I have a problem that possibly has an easy solution for those more proficient than me in HTML/CSS.

I've created a Gantt chart using plain old HTML/CSS, and alternate rows are coloured using the below CSS.

.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;
}

I'd like the ability to override the default colour of these alternate rows from back in the markup, however I can't simply add style="background-color: #87ceeb" to any of the DIVs below as this would likely not target the correct 'nth-child' CSS block.

<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16; background-color: #034B03;" >
      <a href="#">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>

Is there a way to achieve this without resorting to jScript?

Thanks in advance,

Chris.

CodePudding user response：

Please find below two solutions you can use.

First is to set the css for the nth-child again, so that the previous css, the bottom css will override the initially set styling.
Another way is to use specificity which will override the previous css, the advantage of this is that we need not be dependent on nth-child and just style the overrides using classes.

.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;
}
/*using nth selector to override your previous css*/
.wrapper .gantt-row:nth-child(2) {
    background-color: red;
}

.wrapper .gantt-row:nth-child(2) .gantt-row-name {
    background-color: red;
}
/*using specficality to override your previous css*/
.wrapper .gantt-row.test.test-test:nth-child(2) {
    background-color: red;
}

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

<div >
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>

</div>

CodePudding user response：

<div >
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >Tooltip text</span>
    </li>
  </ul>
</div>
<div >
  <div >North Quay 1</div>
  <ul style="grid-template-columns: repeat(28, 1fr)" >
    <li style="grid-column: 8/16;" >
      <a href="https://www.marine.com">World Navigator</a>
      <span >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;
}