Jump to content

Target Individual Accordion Blocks to Make CSS Changes Too

Go to solution Solved by TheSquareSpacer,

Recommended Posts

Hi All,

I have more than one accordion block on different pages. Each one I would like to individually target with different images that appear in each drop down.

Here is the code I have for one specific accordion block:

li:nth-child(1) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

li:nth-child(2) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ec35733e724e83427a1b/1673129013381/Schedule.pnghttps://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

li:nth-child(3) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ed1e3076140ca487fec6/1673129246797/ShipmentTracking.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

The problem is I have another accordion block elsewhere on the site that is picking up this code and I don't want it to.

The block ID # is "#block-yui_3_17_2_1_1673123629170_6403" for the accordion block I'd like to target the above code to.

My question is where do I put the block ID# in the above code to isolate the code to ONLY affect this one specific accordion block?

I know this seems like a dumb question but nothing I have tried works.

Thanks for any help on this.

 

 

 

Link to comment
  • Solution

You can wrap the code like this:
 

#block-yui_3_17_2_1_1673123629170_6403 {

li:nth-child(1) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

li:nth-child(2) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ec35733e724e83427a1b/1673129013381/Schedule.pnghttps://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

li:nth-child(3) .accordion-item__description:before {
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
    background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ed1e3076140ca487fec6/1673129246797/ShipmentTracking.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}

}

Let me know how it goes.
 

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment

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.