5. 5
    Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements
    6m 7s

Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

InstructorGarth Braithwaite

Share this video with your friends

Send Tweet

Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate elements in the DOM that do not impact the content. While ::first-letter ::first-line ::selection ::placeholder allow us to target elements that do not have a specific DOM element.

Evans Owino
Evans Owino
~ 6 years ago

Can someone explain why the following selector selects all but the last item? Thanks

:nth-last-child(n+2)

Garth Braithwaite
Garth Braithwaite(instructor)
~ 6 years ago

Can someone explain why the following selector selects all but the last item? Thanks

:nth-last-child(n+2)

We can break it down. last-child means it's starting from the bottom. n+2 is the equation it uses (counting up from the bottom). n starts with 0, but the first list item is 1. So the first value is 0+2 which equals 2 so the rule applies to the second from the bottom (skipping the very last item which is 1). The next value is 1+2 so the 3rd from the bottom. Continued until all the items have the rules applied, except for the very last one.

Evans Owino
Evans Owino
~ 6 years ago

That make sense. Thanks for the explanation Garth!

Raunaq Sahni
Raunaq Sahni
~ 6 years ago

I was confused about this too, thanks for the explanation.

meyastrolabs
meyastrolabs
~ 5 years ago

You can also achieve the same effect like this :nth-child(n + 2)::before

Garth Braithwaite
Garth Braithwaite(instructor)
~ 5 years ago

You can also achieve the same effect like this :nth-child(n + 2)::before

Sure. You either add a divider after the element to all but the last, or add one before the element to all but the first. You could also use li:not(:first-child)::before or li:not(:last-child)::after Multiple ways to achieve the same goal.