How to override CSS nth-child selector property from the HTML-CodePudding

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" >

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

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：

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).

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

<div style="--bg: blue;">
  <div >odd</div>
  <div >even</div>
</div>

Note, it doesn't have to be a direct parent, any ancestor will do.

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