Name Sections in 7.1

Is there a way to name sections in 7.1 or apply classes? I want to apply specific code to multiple sections and listing them one by one is tedious.

this is actually a pretty interesting question! I don't think Squarespace lets you directly modify attributes on the elements like class and name. However, they do use nice html elements rather than just divs everywhere, which means that you can do some pretty cool stuff with css nth-child selectors. My guess is you don't like looking up the IDs, so this could do something instead of that (although if you rearrange the order of the sections you'll have to be careful!)

Squarespace uses an <article> tag for its non-header/footer content and the <section> tag for sections in a 7.1 layout so we'll start there and use our nth-child selector. At it's most basic, you do this kind of thing, supply a number and it picks that section.

<style>
  /* this will apply a red border to the top of the 3rd section */
  section:nth-child(3) {
  	border-top:solid 2px red;
  }
</style>

However, the nth-child selector in css has some tricks up its sleeve, because it can accept a function that is applied to the n in the form An+B. It can also accept odd or even.

so you can do things like this:

<style>
  /* put a red border on the top of section 1,3,5 */
  article section:nth-child(odd) {
    border-top: solid 2px red;
  }
  /* put a blue border on the top of the first three sections */
  article section:nth-child(-n+3) {
    border-top: solid 2px blue; 
  }  
  /* put a green border on the top of the third section and all following */
  article section:nth-child(n+3) {
    border-top: solid 2px green; 
  }  
  /* combine them for a range! put an orange border on the top sections 2-4 */
  article section:nth-child(n+2):nth-child(-n+4) {
    border-top: solid 2px orange; 
  }  
</style>

Things to note:

• n starts at zero for formulae
• it has to be An+B. this is why you don't write 3-n, you have to write -n+3.
• squarespace will also use a section for the pagination so you need to make sure that the article part is in the css rule. you might also want to use an id for the top level or put this in a code block to make sure it doesn't happen on every portfolio/layout
• reordering sections will cause n to change so if you want the sections to stay even when reordered you'll have to use IDs
• in terms of specificity all the rules are the same, which means that they get applied in the order they're listed, so in that example, the last rule (orange) will overwrite earlier rules.

you can find out more about the nth-child selector here: 
:nth-child() - CSS: Cascading Style Sheets | MDN (mozilla.org)

Hope that gives you some ideas. you could also combine this technique with css first-child and last-child selectors too. 

@iamdavehart makes excellent points in his post.

I'll add that it is also possible to use Javascript to add almost anything in the way of attributes to an element. Such as class names or element ids.

Javascript is not magic or a shortcut in many cases because the same issues iamdavehart mentions about targeting elements also applies to using Javascript. However I've found a few cases where there just doesn't seem to be to a way to target an element through straight CSS. This happens because SS creates the structure of their documents to solve their problems. Not ALL of our problems. So there are bound to be some logical gaps in how to target an element. In other words how to get from point a to z.

So it ends up being a matter of picking the right tool(s) for the job.

Is this still the case? No way to assign an ID to sections? I want to assign an ID to multiple sections through out the site (that are not always in the same layout or order), in order to assign a style globally. Perhaps more efficiently....

Wondering about this too. Any updates?