Targeting the first section of pages with CSS

Site URL: https://liyasafina.squarespace.com/?password=pearler

I want this watermark to automatically appear at the top of all pages whenever my client adds new pages.

I'm trying to target the first section of each page with CSS, but I'm finding this isn't working - it's applying the element on all sections:

section:first-child::before {
  content: "";
  position:absolute;
  background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg);
  background-size:contain;
  background-repeat:no-repeat;
  width: 85%;
  height: 85%;
  top: 7%;
  right: -50vw;
  z-index:2;
}

I've also tried this - nothing appears

section:nth-child(1)::after

as well as this, in the hope that I could just make every 1st section on the site  have a specific width, except the homepage have this - but nothing appears. This also happens using the width option.

[data-current-styles*='"customSectionHeight”: 41’] {
section::before {

This code is missing some symbols

[data-current-styles*='"customSectionHeight”: 41’] {
section::before {

It should be

[data-current-styles*='"customSectionHeight": 41'] {

}

Also, with first code, the code should be

#page>article>section:first-child:before {
    content: "";
    position:absolute;
    background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg);
    background-size:contain;
    background-repeat:no-repeat;
    width: 85%;
    height: 85%;
    top: 7%;
    right: -50vw;
    z-index:2;
}

Thanks @tuanphan! This code works great, except when I wrap it in the other code you gave:

[data-current-styles*='"customSectionHeight": 41'] {

}

On 10/10/2022 at 2:43 PM, PEARLERwork said:

Thanks @tuanphan! This code works great, except when I wrap it in the other code you gave:

[data-current-styles*='"customSectionHeight": 41'] {

}

 

 

Did you solve or still need help? If still need help, Which exact code did you add?

@tuanphan This is how I added it:

[data-current-styles*='"customSectionHeight": 41'] {

#page>article>section:first-child:before {
    content: "";
    position:absolute;
    background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg);
    background-size:contain;
    background-repeat:no-repeat;
    width: 85%;
    height: 85%;
    top: 7%;
    right: -50vw;
    z-index:2;
}

}

You can't wrap code like that, because [data-cu...] is a child element of #page & article

Use this

[data-current-styles*='"customSectionHeight": 41']:before {
    content: "";
    position:absolute;
    background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg);
    background-size:contain;
    background-repeat:no-repeat;
    width: 85%;
    height: 85%;
    top: 7%;
    right: -50vw;
    z-index:2;
}