BriGuy Posted January 8 Share Posted January 8 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 TheSquareSpacer Posted January 8 Solution Share Posted January 8 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. BriGuy 1 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
BriGuy Posted January 8 Author Share Posted January 8 Thank you TheSquarespacer!!!! I must not have had enough coffee this morning! It worked!!😀 Link to comment
TheSquareSpacer Posted January 8 Share Posted January 8 Awesome! @BriGuy Please mark the my reply as answer to help others in the community 🙂 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment