Jump to content

Targeting the first section of pages with CSS

Recommended Posts

Posted

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 {

Screen Shot 2022-10-07 at 9.40.31 am.png

Posted

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)
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?

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

}

 

Posted

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.