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?