CSS Link Type Selector

by Matheus Stein

HTML

<p>
  <a href="https://www.google.com/">Google</a>
</p>
<p>
  <a href="mailto:[email protected]">Email</a>
</p>
<p>
  <a href="file.pdf">PDF</a>
</p>

CSS

a[href^="https://"]{
    background: #baed80;
}
/* emails */
a[href^="mailto:"]{
    background: #80c5ed;
}
   
/* pdfs */
a[href$=".pdf"]{
    background: #ed8090;
}


p {font-family:sans-serif;margin:8px;}
a {display:block;padding: 20px;border-radius:8px}