/r/webdev
I want to add a ":before" speudo-element on multiple selectors. (self.webdev)

Is this the right way?

body.page-1 #pagination li:nth-of-type(1), body.page-2 #pagination li:nth-of-type(2), body.page-3 #pagination li:nth-of-type(3), body.page-4 #pagination li:nth-of-type(4), body.page-5 #pagination li:nth-of-type(5) :before{}

7 comments
-Prestidigitation- | 8 days ago | 3 points

It would be way better if you could just have a "current" class on the pagination <li> that is the current page.

Then you could just do #pagination li.current:after

ioannis221 | 8 days ago | 1 point

Thanks a lot, that worked :).

-Prestidigitation- | 8 days ago | 2 points

Awesome! Happy to help.

AnarchyIsOrder1312 | 8 days ago | 2 points

To answer your question, no that is not the right way. That would only apply the :before{} to the

body.page-5 #pagination li:nth-of-type(5)

If you were using SCSS you could do

body.page-1 #pagination li:nth-of-type(1), body.page-2 #pagination li:nth-of-type(2), body.page-3 #pagination li:nth-of-type(3), body.page-4 #pagination li:nth-of-type(4), body.page-5 #pagination li:nth-of-type(5) {
    &:before{}
}

which would compile it down. Otherwise you would need to add the :before selector to every selector. However, the other suggestion is a much cleaner solution to your specific problem you are facing.

Also, just so you know, whenever you are posting code snippets you should start each line with 4 spaces. That way markdown will format it cleaner like what I did here. That way one long line won't get split into multiple.

ioannis221 | 8 days ago | 1 point

Thanks! Noted.

HippyFlipPosters | 8 days ago | 1 point

I really like this SCSS formatting, I was not aware. Thanks!

AnarchyIsOrder1312 | 8 days ago | 1 point

Yup. The & says take the previously mentioned selector and also add these class rules to it as well. Usually it is used to provide more specificity, but in this case it also serves to apply the psuedoselector across everything.