CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
DjGMory
DjGMory

Reputation: 65

first-child pseudo class not working for <a> tag

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!

Upvotes: 2

Views: 918

Answers (4)

Alfo
Alfo

Reputation: 4819

It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:

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

Upvotes: 1

LeJared
LeJared

Reputation: 2052

: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 {}

Upvotes: 4

mask8
mask8

Reputation: 3638

maybe you want to do

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

Upvotes: 1

Danil Speransky
Danil Speransky

Reputation: 30453

It is because you apply this pseudo class to first link in li element. Use 

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

Or 

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

Upvotes: 1

Related Questions