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

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!

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;
}

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%}
}