Jump to content

Name Sections in 7.1

Recommended Posts

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.

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

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:

  /* 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; 

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. 



Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...
  • 1 year later...

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.