Question

I’m having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that’s being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn’t make the list too wide).

But I wanted to remove the first link’s left-border so that borders were only shown between each list element, and not on the first or last list element.

The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.

Here’s what I have:

CSS

ol.bjqs-markers{
    display:inline-block;
    list-style:none;
    margin:0;
    padding:0;
    z-index:9999; 
    width:100%; 
    position:absolute;
    top:0px;
    }


 ol.bjqs-markers li{
     display:inline;
     float:left;
     height:30px;
     width:20%;
     background:rgba(0,0,0,0.7);
     float:left;
     margin:0 0px;
}

 ol.bjqs-markers li a{
    display:block;
    font-size:22px;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    height:100%;
    display:block;
    overflow:hidden;
    border-left:1px solid #F00;
}

 ol.bjqs-markers li a:first-child{
    border-left:none;
}

And HTML:

<ol class="bjqs-markers">
<li class="active-marker"><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
</ol>

Can someone point me in the direction of why that a:first-child applies a border of “none” to all the tags?

Thanks guys!

Answer 1

:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.

What you’re looking for is this:

ol.bjqs-markers li:first-child a {}