Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Selects every element whose href attribute value ends with ".htm" with CSS
The CSS [attribute$="value"] selector targets elements whose specified attribute value ends with a particular string. In this case, we're selecting elements whose href attribute ends with ".htm".
Syntax
[attribute$="value"] {
/* CSS properties */
}
Example
The following example selects all anchor elements whose href attribute ends with ".htm" and applies orange border styling −
<!DOCTYPE html>
<html>
<head>
<style>
[href$=".htm"] {
border: 5px solid orange;
border-radius: 5px;
padding: 10px;
text-decoration: none;
display: inline-block;
margin: 10px;
}
a {
color: #333;
background-color: #f5f5f5;
padding: 8px;
margin: 5px;
display: inline-block;
}
</style>
</head>
<body>
<a href="/java/index.htm">Java Tutorial</a>
<a href="/python/python_tutorial.htm">Python Tutorial</a>
<a href="/java/java_tutorial.pdf">Java Tutorial PDF</a>
<a href="/css/css_reference.html">CSS Reference</a>
</body>
</html>
The first two links (Java Tutorial and Python Tutorial) that end with ".htm" display with orange borders and rounded corners. The other two links (PDF and HTML files) appear with normal styling without the orange border.
Conclusion
The [attribute$="value"] selector is useful for targeting elements based on the ending pattern of attribute values, making it perfect for styling links based on file extensions.
Updated on: 2026-03-15T12:40:08+05:30
515 Views
Advertisements