Jump to content

How to target multiple data-section-id's with CSS

Recommended Posts

Hi and thanks in advance!

I've created a CSS gradient animation for the backgrounds on the top sections of each page of my site. I've tried using a comma between data-section-ids but it targets the full page, so the workaround so far is to target each data-section-id separately like the CSS below. 

My question is how to target multiple data-section-id's using one snippet of CSS rather than targeting each?

 

section[data-section-id="5f099f4ce9cddf559f943775"]
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

section[data-section-id="5f094579b197041778919326"] 
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

section[data-section-id="5f0ee56b5d535d77f9057b71"]
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}
@keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}

Thank you!

Link to comment
3 hours ago, Rixo said:

Hi and thanks in advance!

I've created a CSS gradient animation for the backgrounds on the top sections of each page of my site. I've tried using a comma between data-section-ids but it targets the full page, so the workaround so far is to target each data-section-id separately like the CSS below. 

My question is how to target multiple data-section-id's using one snippet of CSS rather than targeting each?

 


section[data-section-id="5f099f4ce9cddf559f943775"]
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

section[data-section-id="5f094579b197041778919326"] 
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

section[data-section-id="5f0ee56b5d535d77f9057b71"]
.section-background {
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}
@keyframes AnimationName {
    0%{background-position:30% 0%}
    50%{background-position:71% 100%}
    100%{background-position:30% 0%}
}

Thank you!

You add them like so

section[data-section-id="5f099f4ce9cddf559f943775" .section-background,
section[data-section-id="5f099f4ce9cddf559f943775-2" .section-background{
    background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 38s ease infinite;
    -moz-animation: AnimationName 38s ease infinite;
    animation: AnimationName 38s ease infinite;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 7 months later...

This worked for me.

 

Quote

//moving gradiant section
section[data-section-id="60425e65bb04cf77585223be"]
.section-background,
section[data-section-id="60482f6ec0532258368c3ab9"]
.section-background{
 background: radial-gradient(circle, #26887c, #134943, #26887c);
    background-size: 400% 400%;

    -webkit-animation: Animation 41s ease infinite;
    -moz-animation: Animation 41s ease infinite;
    -o-animation: Animation 41s ease infinite;
    animation: Animation 41s ease infinite;
}

@-webkit-keyframes Animation {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
}
@-o-keyframes Animation {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
}
@keyframes Animation {
    0%{background-position:22% 0%}
    50%{background-position:79% 100%}
    100%{background-position:22% 0%}
}

 

Edited by Jeremyn
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.