css Question posted in
Some basic documentation can be found here.

Css – Change background colour of certain row

I have this code and I want to change the background colour of the fifth last row. I know I need to use nth-last-child.
Someone can tell me the code?

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    background-color: lime;
}
Tags:

3

Answers


  1. 0

    I am assuming your HTML structure looks like this :

    <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

    Try this CSS with your structure:

    .grid-container > :nth-child(5) {
    background-color: red; 
}
    Login or Signup to reply.
  2. 0

    You can target the four cells in the 5th row from the bottom.

    They have nth-last-child numbers 17, 18, 19, 20.

    Here’s a simple example:

    <style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    background-color: lime;
  }
  
  .grid-container>* {
    width: 100%;
    height: 100px;
    border: solid 1px black;
  }
  
  .grid-container>*:nth-last-child(17),
  .grid-container>*:nth-last-child(18),
  .grid-container>*:nth-last-child(19),
  .grid-container>*:nth-last-child(20) {
    background-color: pink;
  }
</style>
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    I do not know a way of targeting the row as such as there doesn’t seem to be such a concept in grid (ie if you have a gap the gaps will not be colored).

    Login or Signup to reply.
  3. 0

    I am baffled by your question of styling the "fifth last row" when the part of CSS that you included indicates only four rows. I am guessing that you want to target excess/additional rows.

    You could use the :nth-child() pseudo-class to style the main 16 grid cells and the additional grid cells would have the grid container background color.

    .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  background-color: firebrick;
}

.grid-container div:nth-child(-n + 16) {
  background-color: lime;
}
    <div class="grid-container">
  <div>A1</div>
  <div>A2</div>
  <div>A3</div>
  <div>A4</div>
  <div>B1</div>
  <div>B2</div>
  <div>B3</div>
  <div>B4</div>
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
  <div>D1</div>
  <div>D2</div>
  <div>D3</div>
  <div>D4</div>
  <div>E1</div>
  <div>E2</div>
</div>

    I’d also like to say that your grid-template-rows declaration is unnecessary because it declares the default behavior.

    Also, since you want multiple columns of the same width, it would be easier to use the repeat() function.

    .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: firebrick;
}

.grid-container div:nth-child(-n + 16) {
  background-color: lime;
}
    <div class="grid-container">
  <div>A1</div>
  <div>A2</div>
  <div>A3</div>
  <div>A4</div>
  <div>B1</div>
  <div>B2</div>
  <div>B3</div>
  <div>B4</div>
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
  <div>D1</div>
  <div>D2</div>
  <div>D3</div>
  <div>D4</div>
  <div>E1</div>
  <div>E2</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search