CSS before and after selector inside div

Question

I am trying to use after and before selectors to apply certain style to children of a div, my code is as follows :

<div class="outer-container">
    <a href="#" class="links">Link 1</a>
    <a href="#" class="links">Link 2</a>
    <a href="#" class="links">Link 3</a>
    <span class="mid-divider">Some Text</span>
    <a href="#" class="links">Link 4</a>
    <a href="#" class="links">Link 5</a>
    <a href="#" class="links">Link 6</a>
    <span class="last-divider">Some Text</span>
    <a href="#" class="links">Link 7</a>
    <a href="#" class="links">Link 8</a>
    <a href="#" class="links">Link 9</a>
</div>

.outer-container .mid-divider::before{
    //some styles
}
.outer-container .mid-divider::after{
    //some styles
}

I want to apply styles to link1, link2 and link3 as well as to links7,8 and 9. But the selector is not working.

Answer 1

You don't need the

::before

or

:: after

tag in this case, just call the elements like this:

.outer-container a{}

.mid-divider a{}

.last-divider a{}

Answer 2

try using this

.outer-container a:nth-child(n+7), .outer-container a:nth-child(-n+3) { }

.outer-container a:nth-child(n+7) <-- this selects all children after the 7th child

.outer-container a:nth-child(-n+3) <-- this selects all children before the 4th child.

check this link out. Shows a variety of ways to target different child elements http://css-tricks.com/useful-nth-child-recipies/