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

css email href mailto

60,616

Solution 1

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

Solution 2

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...)

60,616

Author by

Roland

Artist looking for support in various technical areas.

Updated on February 24, 2020

Comments

Roland about 4 years

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>

Roland almost 12 years

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.
OACDesigns almost 12 years

looks like a bug to me that it works with a div and not a span