CODEWITHSUNDEEP
cssemailhrefmailto
Roland
Roland

Reputation: 1940

Styling email link / href="mailto:" with CSS

Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.

Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?

and while 

a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

works great, as soon as i try to change it into

.about a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

it does not function as it's supposed too.

do tags not listen to span formatting or class nesting? 

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
}

.bottom-left {

    position: absolute;
    font:sans-serif;
    bottom: 15px;
    left: 15px;
}


.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
    font-family: sans-serif;
}


/*a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}*/



.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}




</style>

<title>TEMP</title>

</head>
<body>


<div class="bottom-left">
        <span class="about">
            <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>
        </span>
</div>



</body>
</html>

Upvotes: 23

Views: 75613

Answers (2)

The Felis Leo
The Felis Leo

Reputation: 51

I think .about take precedence over a. cf. Css Rule Specificity.

Basically, a css ruleset is assign a priority like a version number like this:

{#id}.{#class}.{#element}.{order}

with

  • {#id} : count of id selectors
  • {#class} : count of classes, pseudo-classes, attributes
  • {#element} : count of elements, pseudo-elements
  • {order} : the index of this rule across all files

So, we have the following order:

  1. 0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
  2. 0.1.1.a span.about (0 id, 1 class, 1 element)
  3. 0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
  4. 0.1.0.* .about (0 id, 1 class, 0 element)

span.about and a[href^="mailto:"] have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.

If you remove the span then the rule is less specific and loose.

(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)

Upvotes: 2

Shailender Arora
Shailender Arora

Reputation: 7778

Hi actually you have commented your email link css:-

so now write the css like this method its working fine......

a[href^="mailto:"]
{ 
  font-family: sans-serif;
  color: red;
  font-size: 11px;
}

see the demo:- http://jsbin.com/ijofoq/edit#html,live

UPDATED

Now its working fine...edit your HTML and add in your HTML 

<div class="bottom-left">
    <div class="about">
        <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp;
        <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>
    </div>

basically you have to remove the span tag from .about class.

check this :- http://jsbin.com/ijofoq/2/edit

Upvotes: 40

Related Questions