Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS HTML Attribute Selectors

Friday, August 20, 2021

CSS HTML Attribute Selectors

In addition to class and ids you can also apply styles based on an element's attribute.  For example you can bold a href attribute that has the value "google.com" in it and match it exactly like this

    <style>
        a[href="https://www.google.com"]{font-weight: bold;font-size:200%;}
    </style>













As an  HTML creator you don't even need to worry about the markup, the selector automatically applies the styles once it finds the value.  So the markup would be like this

<a href="https://www.google.com">google.com</a>



You can also combine more than one attribute, like this

    <style>
        a[href="https://www.google.com"][title="Google"]{font-weight: bold;font-size:200%;}
    </style>

The style above will only apply the styles only if the href matches the value as well as the title

The above example is great but it requires that an exact string match occurs.  The more useful match are the substring or partial matches.  Imagine if you want to look for secure URLs only or only mailto: links, you can do that with these matches.

Here are the partial matches that are available.

[href~="https"]  - selects any values that contains the string https
[href*="https"] - selects elements with attribute with the substring https
[href^="https"] - selects elements with attribute that begins with https
[href$="https"] - selects elements with attribute that ends with https

So lets say we want to highlight the links that are secured or is linking to an e-mail address, we do that by writing the following style definition

        a[href^="https"]{font-weight: bold;font-style: italic;color: green;}
        a[href^="mailto"]{font-weight: bold;font-style: italic;color: green;}

When there's markups that matches the criteria the styles are applied automatically.  For example the following markups will trigger the style

    <a href="https://www.microsoft.com">https://www.microsoft.com</a><br>
    <a href="http://www.microsoft.com">http://www.microsoft.com</a><br>
    <a href="mailto:billgates@microsoft.com">mailto:billgates@microsoft.com</a>

















Here is the entire markup:

<html>
<head>
    <style>
        a[href="https://www.google.com"][title="Google"]{font-weight: bold;font-size:200%;}
        a[href^="https"]{font-weight: bold;font-style: italic;color: green;}
        a[href^="mailto"]{font-weight: bold;font-style: italic;color: green;}
    </style>
</head>
<body>
    <a href="https://www.google.com" title="Google">google.com</a><br><br>
    <a href="https://www.microsoft.com">https://www.microsoft.com</a><br>
    <a href="http://www.microsoft.com">http://www.microsoft.com</a><br>
    <a href="mailto:billgates@microsoft.com">mailto:billgates@microsoft.com</a>
</body>
</html>

Previous: The ID And Class Selectors in CSS

 at

1 comment:

  1. Sara KhanAugust 31, 2021 at 4:48 AM

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info Best Water Treatment Companies in UAE
    anti hair fall shower filter
    Sewage water treatment plant in Dubai UAE

    ReplyDelete