CSS Selectors -- Class names and IDs

So, I'm trying to make very specific changes to some CSS styles. I figure I'll probably have to use these long class names and IDs as selectors, right? For example, this is just part of one selector:  #yui_3_17_2_1_17011......... > div.fe-block.fe-block-51ced305e6f..... 

However, I'm on a chat with a Squarespace agent right now who told me "So it looks like the ID numbers of the block will change dynamically in version 7.1 sites, so any code targeting a specific ID may not work when the site is refreshed or reloaded."

That's clearly an issue for custom css, no? Again I'm not trying to change every .button or every p, I'm trying to access very specific buttons and text divs, and I feel like I need those IDs and class names to stay the same!

TIA

@tuanphan this is great information to have... but what if all the blocks ONLY have #yui ids? how would I target this block, for example?

You can use this Text Block ID to target it

#enter-text-block-id + .row >.span-8>row:nth-child(1)

Reference: https://www.w3schools.com/cssref/css_selectors.php

13 hours ago, tuanphan said:

You can use this Text Block ID to target it

#enter-text-block-id + .row >.span-8>row:nth-child(1)

Reference: https://www.w3schools.com/cssref/css_selectors.php

@tuanphan oy that makes it very cumbersome... annoying that they won't just generate static IDs for all the blocks, that would make targeting for CSS MUCH cleaner overall. Silly choice by Squarespace!

16 hours ago, SaranyaDesigns said:

@tuanphan oy that makes it very cumbersome... annoying that they won't just generate static IDs for all the blocks, that would make targeting for CSS MUCH cleaner overall. Silly choice by Squarespace!

You can also use JS code to attach a class name to it 😆

Use ideal here

Hi @tuanphan, I'm in the same boat and trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you!

Also, I've been trying like hell to get the hover state to change the text to blue on hover and can't seem to override the existing style. I've tried !important and targeting the block ID and no dice. Cleared cache. Any pointers?

My current best attempt looks something like this:

#block-yui_3_17_2_1_1712158021426_22128 .sqs-block-button-element--small:hover a {
    color: blue !important; 
}
 

On 4/4/2024 at 12:21 AM, JA_ATL said:

Hi @tuanphan, I'm in the same boat and trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you!

Also, I've been trying like hell to get the hover state to change the text to blue on hover and can't seem to override the existing style. I've tried !important and targeting the block ID and no dice. Cleared cache. Any pointers?

My current best attempt looks something like this:

#block-yui_3_17_2_1_1712158021426_22128 .sqs-block-button-element--small:hover a {
    color: blue !important; 
}
 

Can you share link to page where you use text/button? We can check easier

On 4/3/2024 at 10:21 AM, JA_ATL said:

trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you!

Did you ever figure out how to do this?

Still looking for a solution here to apply a class name versus relying on #block ID.

I have a lot of modified CTA buttons but also other sections of my website that I target with CSS to make changes from the standard text styling. I don't want to broadly change all squarespace selectors, but I also don't like that my only other option appears to be using a #block ID to to select what I modify in CSS. The issue with using Block ID is whenever I duplicate a page, I have to go back in and change all the old block IDs to the new ones.

It would be so much easier if I could assign a section a class name like "faq.Section" instead of using section[data-section-id="67017fdc67a26006207dd834"], which requires me to manually update if I clone my page. Then if I clone the page, the CSS in the advance section would still be faq.Section, and wouldn't require styling adjustments for old IDs.

Has anyone solved a custom code option for giving an entire section a class name?

10 hours ago, Giving_Machine said:

Still looking for a solution here to apply a class name versus relying on #block ID.

I have a lot of modified CTA buttons but also other sections of my website that I target with CSS to make changes from the standard text styling. I don't want to broadly change all squarespace selectors, but I also don't like that my only other option appears to be using a #block ID to to select what I modify in CSS. The issue with using Block ID is whenever I duplicate a page, I have to go back in and change all the old block IDs to the new ones.

 

It would be so much easier if I could assign a section a class name like "faq.Section" instead of using section[data-section-id="67017fdc67a26006207dd834"], which requires me to manually update if I clone my page. Then if I clone the page, the CSS in the advance section would still be faq.Section, and wouldn't require styling adjustments for old IDs.

Has anyone solved a custom code option for giving an entire section a class name?

With button, if you don't want to target ID, you can target href

For example your button has url: https://google.com, you can target selector like this

div.button-block:has(a[href="https://google.com"]) {
CSS value
}

With this way, when you duplicate the page, the code will work with duplicated button

Do similar with section

section.page-section:has(a[href="https://google.com"]) {
CSS value
}