How to refer to the current section in CSS?

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

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. 

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)

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.

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 👍