Different colors on span inside href link

Question

I am trying to add different colors on span inside the href links. But for some reasons they are not reflecting. Please tell me what is the mistake I am doing here?

Here is the Fiddle

HTML:

<div class="map_view_buttons">
<a href="draw"><span></span>Draw From Scratch</a>
<a href="add"><span></span>Add Area</a>
<a href="edit"><span></span>Edit Area</a>

CSS:

.map_view_buttons{
float:left;
}
.map_view_buttons a{
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #a8a8a8;
    font-weight:bold;
    color:#000;
    font-size:12px;
    }
    .map_view_buttons a span{
        display:inline-block;
        width:18px; height:18px;            
        vertical-align:middle;
        margin-right:5px;
        border:1px solid #ccc;
        }
        .map_view_buttons a.draw span{background:red;}
        .map_view_buttons a.draw span{background:orange;}
        .map_view_buttons a.draw span{background:green;}

Answer 1

You are declaring your class names in href attribute. Your markup should be

<div class="map_view_buttons">
    <a href="#" class="draw"><span></span>Draw From Scratch</a>
    <a href="#" class="add"><span></span>Add Area</a>
    <a href="#" class="edit"><span></span>Edit Area</a>
</div>

Not only that, you are having the same selectors with different colors, so the last one will override the two previous ones.

So that should be

.map_view_buttons a.draw span {
    background:red;
}
.map_view_buttons a.add span {
    background:orange;
}
.map_view_buttons a.edit span {
    background:green;
}

Demo

Am not sure if you really want the selectors to be that specific, and if you don't want to add the classes to each of the anchor tags, you can use :nth-of-type() pseudo...

So the above thing can be written as

.map_view_buttons a:nth-of-type(1) span {
    background: red;
}

.map_view_buttons a:nth-of-type(2) span {
    background: red;
}

.map_view_buttons a:nth-of-type(3) span {
    background: red;
}

Demo 2 (No need to declare classes)

---

You can also get rid of the span tags if you want to, by using :before pseudo element with pointer-events: none;.

.map_view_buttons {
    float:left;
}
.map_view_buttons a {
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #a8a8a8;
    font-weight:bold;
    color:#000;
    font-size:12px;
}
.map_view_buttons a:before {
    content: "";
    display:inline-block;
    width:18px;
    height:18px;
    vertical-align:middle;
    margin-right:5px;
    border:1px solid #ccc;
}
.map_view_buttons a:nth-of-type(1):before {
    background: red;
}
.map_view_buttons a:nth-of-type(2):before {
    background: orange;
}
.map_view_buttons a:nth-of-type(3):before {
    background: green;
}

Demo 3 (No span tags, no class defined)

I am just saying that you can use it but doesn't mean you should use it, just go with what suits your requirements the best.

Note: :nth-of-type() pseudo is not supported < IE9 so if you are looking to support vintage versions, than declaring classes for each is a better option.

Answer 2

Your CSS selectors are referencing a href value as if it was set as the class

Either change your HTML to:

<div class="map_view_buttons"> <a class="draw"><span></span>Draw From Scratch</a>
 <a class="add"><span></span>Add Area</a>
 <a class="edit"><span></span>Edit Area</a>
</div>

Or, change your CSS to:

.map_view_buttons {
    float:left;
}
.map_view_buttons a {
    display:inline-block;
    padding:3px 10px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #a8a8a8;
    font-weight:bold;
    color:#000;
    font-size:12px;
}
.map_view_buttons a span {
    display:inline-block;
    width:18px;
    height:18px;
    vertical-align:middle;
    margin-right:5px;
    border:1px solid #ccc;
}
.map_view_buttons a[href=draw] span {
    background:red;
}
.map_view_buttons a[href=draw] span {
    background:orange;
}
.map_view_buttons a[href=draw] span {
    background:green;
}

Answer 3

I suggest that you do not use the span inside the link rather use the parent div as an identifyier then use the nth child selector on the anchor tags

map_view_buttons a:nth-child(3) {  
  background:green;
}

http://css-tricks.com/how-nth-child-works/

Answer 4

'draw' is not a class. If you want to target the href attribute of a anchor tag, this is how you do it:

.map_view_buttons a[href="draw"] span{background:red;}

Here is the jsfiddle

http://jsfiddle.net/ye3yp/3/

Answer 5

You can refer this fiddle Fiddle You can use CSS attribute selectors to select a link with href attribute

.map_view_buttons a[href="draw"]{background:red;}
.map_view_buttons a[href="add"]{background:orange;}
.map_view_buttons a[href="edit"]{background:green;}