Friday, August 20, 2021
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:
Previous: The ID And Class Selectors in CSS
<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
Subscribe to:
Post Comments (Atom)
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
ReplyDeleteanti hair fall shower filter
Sewage water treatment plant in Dubai UAE