I am trying to create a website on Squarespace and am having trouble selecting elements on my HTML page to use in the custom css. When I use the inspect element on my browser, the ID's for some elements change while others are constant.
I am running the developer mode and downloaded the code to my local machine via github.
In the downloaded site.region file I found the div element which contains the content I am trying to style:
<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
{squarespace.main-content}
</div>
Where is {squarespace.main-content} coming from and how do I select elements inside of it to style?
Regarding some IDs changing and some staying constant, indeed, this is the case. See this answer for more information on this. In summary:
...any ID starting with "yui" can/will change on page refresh...however...block IDs (ID's starting with "block-" do not change as long as the block is not removed...
Regarding where the {squarespace.main-content} coming from, that is a JSON-T tag that tells the server to load the content as entered within the content management system (a.k.a. "Layout Engine") for that page. Wherever that tag is, the content from Layout Engine for that page will be loaded.
Finally, regarding how to select the elements within the main-content for styling with CSS, you are on the right track. Inspect the elements as you are doing. If you want to target a specific block, look for ID's starting with block- and target those. Or find other ways to target the element, such as :first-child or nth-child selectors. Then enter your CSS in the CSS Editor or, if you're using Developer Mode (as you indicated that you are), then add the rules to your base.less file (or other CSS files as the case may be) and then update your template using Git or SFTP.
One last note that you do not need to use Developer Mode to target elements with CSS. You can simply target the right elements as mentioned then enter the rules in the CSS editor as mentioned, so there may be no need for the added complexity of Developer Mode at all.