More targeting issues

Backlight Customization
#1

As explained to me in previous posts, in order to change a specific area of a page with CSS, one should “target” that area by identifying it with its identifier.
Wanting to change the background on the large image display when below 800px, I wrote some CSS based on the identifier found in the body section of the source code.
On the source code page, the identifier is: album-template-identifier-artwork it seems to me.
But my CSS does nothing…

`/* large image display */

.album-template-identifier-artwork> .the__copy>.content {
    background-color: rgb(7 7 7 / 41%);
}   `

As an example, see this page: https://pideja.ca/lucnadeau/galleries/02bestiaire/Lundi,-on-mange-les-restants-single.php at 800px or less.
The image sits on a “beige” background I want to change.

What am I missing here?

#2

try removing that arrow (>). It’s not needed and it’s also in the wrong place. It needs a space before it.

.album-template-identifier-artwork> .the__copy .content {
    background-color: rgb(7 7 7 / 41%);
}

and the color should probably be rgba(7, 7, 7, .41)

1 Like
#3

For context, the > in CSS means that the rule should only be applied to direct descendants, and not descendants beyond the first level of nesting.

div {
  background-color: white;
}

div.parent > div {
  background-color: red;
}

<div class="parent">
  <div>
    This DIV would be red.

    <div>
      But this deeply nested DIV would remain white.
    </div>
  </div>
</div>
#4

Thank you Rod and Matthew,

Removed the offending > and corrected the color and…it works!

1 Like