This here changes all the squares to pink. https://jsfiddle.net/7cye4hfu/1/

If I wanted to change one of the pink squares to a different color, how would I do that?

.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
</div>

CodePudding user response：

Many ways. Here are two

.channel-browser__channel-grid-item.box-color-red::after {
  background-color: red;
}
.channel-browser__channel-grid-item:nth-of-type(4)::after {
  background-color: green;
}

.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
}

.channel-browser__channel-grid-item.box-color-red::after {
  background-color: red;
}
.channel-browser__channel-grid-item:nth-of-type(4)::after {
  background-color: green;
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
  <div >
    <img width="280" height="280" src="https://via.placeholder.com/465x465" >
  </div>
</div>

CodePudding user response：

Insted of :

.box-color-red {
    background: red;
    border-radius: 4px;
 }

 .box-color-blue {
     background: blue;
 }

 .box-color-yellow {
     background: yellow;
 }

 .box-color-green {
     background: green;
 }

Try using:

.box-color-red::after {
    background: red;
    border-radius: 4px;
 }

 .box-color-blue::after {
     background: blue;
 }

 .box-color-yellow::after {
     background: yellow;
 }

 .box-color-green::after {
     background: green;
 }