Using nth-child() ibn calc()
I think I saw one of Kevin
I have a list of articles with the same class specified via a custom property, and a calc based on the nth-of-child, but instead of hard coding for each article I want it more automated e.g.
from
article--stagger-delay>* {
animation-delay: var(--ph-animation-delay-x) !important;
animation-timing-function: var(--ph-animation-timing-function) !important;
}
article--stagger-delay>:nth-of-type(1) {
--wpe-animation-delay-x: var(--ph-animation-delay);
}
article--stagger-delay>:nth-of-type(2) {
--wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay));
}
article--stagger-delay>*:nth-of-type(3) {
--wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay));
}
to
article--stagger-delay>*:nth-child(n) {
--wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay));
}
so trying to base the delay on n* the article
I hope this makes sense
s videos using nth-child in calc operations ( I havenI have a list of articles with the same class specified via a custom property, and a calc based on the nth-of-child, but instead of hard coding for each article I want it more automated e.g.
from
article--stagger-delay>* {
animation-delay: var(--ph-animation-delay-x) !important;
animation-timing-function: var(--ph-animation-timing-function) !important;
}
article--stagger-delay>:nth-of-type(1) {
--wpe-animation-delay-x: var(--ph-animation-delay);
}
article--stagger-delay>:nth-of-type(2) {
--wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay));
}
article--stagger-delay>*:nth-of-type(3) {
--wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay));
}
to
article--stagger-delay>*:nth-child(n) {
--wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay));
}
so trying to base the delay on n* the article
I hope this makes sense
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
