Selects every element whose href attribute value contains the substring "java" with CSS

The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This attribute selector is particularly useful when you need to target elements based on partial attribute matches.

Syntax

[attribute*="value"] {
    /* CSS properties */
}

Where attribute is the HTML attribute name and value is the substring to search for within that attribute's value.

Example: Selecting Links Containing "java"

The following example demonstrates how to select all anchor elements whose href attribute contains the substring "java" −

<!DOCTYPE html>
<html>
<head>
<style>
    [href*="java"] {
        border: 5px solid orange;
        border-radius: 5px;
        padding: 10px;
        text-decoration: none;
        display: inline-block;
        margin: 5px;
        background-color: #fff3e0;
    }
</style>
</head>
<body>
    <h3>Tutorial Links</h3>
    <a href="https://www.tutorialspoint.com/php/index.htm">PHP Tutorial</a>
    <br><br>
    <a href="https://tutorialspoint.com/java/index.htm">Java Tutorial</a>
    <br><br>
    <a href="https://tutorialspoint.com/javascript/index.htm">JavaScript Tutorial</a>
    <br><br>
    <a href="https://tutorialspoint.com/python/index.htm">Python Tutorial</a>
</body>
</html>
Four tutorial links are displayed. The "Java Tutorial" and "JavaScript Tutorial" links are styled with an orange border, rounded corners, padding, and light orange background because their href attributes contain the substring "java". The PHP and Python tutorial links remain unstyled.

Conclusion

The [attribute*="value"] selector provides a powerful way to target elements based on partial attribute matches. It's case-sensitive and matches any occurrence of the specified substring within the attribute value.

Updated on: 2026-03-15T12:42:38+05:30

853 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements