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

Thursday, August 8, 2019

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

No comments:

Post a Comment

Search This Blog