Jump to content

How to refer to the current section in CSS?

Recommended Posts

Hi

My question is a bit tricky, and it consists of two part.. I want to insert a code block in a section.

  • How can I refer to this same section which contains the code block using CSS without using section ID or section n-th child? (so when I copy the code to another section, I don't have to change anything in the code)
     
  • How can I refer to the next section (if my code block is in section 2, how can I refer to section 3 inside my code block, so that relation stay when I copy the block to another section)

I need this for multiple reasons. One of them, I have a number of projects in one page, each project have two sections (onw for text, and one for gallery). I am using a code that make these two sections next to each other using nth child. Because I have a lot of projects (I have multiple pages, each page has between 10 and 25 projects), putting the code manually for each section number is very time consuming and can be very confusing.

I really appreciate any help !

 

https://penguin-primrose-f7ng.squarespace.com/projects/artworks

tmp2020

Edited by hme164
Link to comment
26 minutes ago, hme164 said:

My question is a bit tricky, and it consists of two parts

It will help us if you provide us with more information...

1. Please provide us with the site's read-only password so that we can view it.

2. Please provide details of the code you want to add inside the code blocks. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
2 minutes ago, paul2009 said:

It will help us if you provide us with more information...

1. Please provide us with the site's read-only password so that we can view it.

2. Please provide details of the code you want to add inside the code blocks. 

pw is: 
tmp2020

There are actually few codes I would need this for, one of them is this one:

<style>
@media only screen and (min-width: 641px){
    #collection-5f6cc0184c907d71466b19f8
    #page .page-section:nth-of-type(2) {
        width: 35%;
        max-height: 80vh;
        align-items: top;
        float: left;
        }
    #page .page-section:nth-of-type(3) {
        width: 65%;
        min-height: 80vh;
        align-items: top;
        }
    }

</style>

 

I want a way to replace ".page-section:nth-of-type(2)" with the current section the code block is placed in. and ".page-section:nth-of-type(3)" with the next section the code is placed in (n+1)

Link to comment

Thanks for the additional information; it helps me to understand your question.

Unfortunately, there isn't a way to refer to the section where you've added the code block. That's not the way CSS styles work.

If you would like some advice, I don't recommend adding CSS using Code Blocks. It can quickly become unmanageable and result in conflicts that can be unnecessarily difficult to troubleshoot. Ideally, the CSS styles should be added to the Custom CSS panel (within the Design menu) where they can be structured to make them easy to maintain. There may be better alternatives to the nth-of-type selectors, but it depends on the specifics of what you want to change and how.

I hope this helps.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
1 minute ago, paul2009 said:

Thanks for the additional information; it helps me to understand your question.

Unfortunately, there isn't a way to refer to the section where you've added the code block. That's not the way CSS styles work.

If you would like some advice, I don't recommend adding CSS using Code Blocks. It can quickly become unmanageable and result in conflicts that can be unnecessarily difficult to troubleshoot. Ideally, the CSS styles should be added to the Custom CSS panel (within the Design menu) where they can be structured to make them easy to maintain. There may be better alternatives to the nth-of-type selectors, but it depends on the specifics of what you want to change and how.

I hope this helps.

Aha! I see.. 

Thank you a lot for your help and advice 👍

Link to comment

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.