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

Asked 17/5, 2012 at 8:50 Answered 23/2, 2017 at 13:19

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>

Denationalize answered 17/5, 2012 at 8:50 Comment(0)

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

Culmination answered 17/5, 2012 at 8:59 Comment(2)

thx Shailender! I know it works this way, I was rather asking why it wasn't working without this solution and why the a href element can't be nested to the .about class. – Denationalize 17/5, 2012 at 9:7

looks like a bug to me that it works with a div and not a span – Felony 17/5, 2012 at 13:58

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:

0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
0.1.1.a span.about (0 id, 1 class, 1 element)
0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
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...)

Boost answered 23/2, 2017 at 13:19 Comment(0)

Recommended topics

Hot tags