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
Select elements whose attribute value begins with a specified value with CSS
The CSS attribute selector [attribute^="value"] is used to select elements whose attribute value begins with a specified value. This selector is particularly useful when you want to target elements with attributes that start with a common prefix.
Syntax
[attribute^="value"] {
/* CSS properties */
}
Example: Selecting Images with Alt Text Starting with "Tutor"
The following example selects all images whose alt attribute value begins with "Tutor" and applies a blue border −
<!DOCTYPE html>
<html>
<head>
<style>
[alt^="Tutor"] {
border: 5px solid blue;
border-radius: 5px;
margin: 10px;
}
</style>
</head>
<body>
<img src="/videotutorials/images/tutor_connect_home.jpg" height="200" width="200" alt="Tutor Connect">
<img src="/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library">
<img src="/videotutorials/images/coding_ground_home.jpg" height="200" width="200" alt="Coding Ground">
</body>
</html>
The first two images (with alt attributes starting with "Tutor") display with a blue border and rounded corners. The third image (alt="Coding Ground") remains unaffected.
Example: Selecting Links Starting with "https"
This example demonstrates selecting all links whose href attribute begins with "https" −
<!DOCTYPE html>
<html>
<head>
<style>
a[href^="https"] {
color: green;
font-weight: bold;
text-decoration: underline;
}
a {
display: block;
margin: 5px 0;
}
</style>
</head>
<body>
<a href="https://www.example.com">Secure Link</a>
<a href="http://www.example.com">Non-secure Link</a>
<a href="mailto:test@example.com">Email Link</a>
</body>
</html>
Only the first link (starting with "https") appears in green bold text with underline. The other links remain in default styling.
Conclusion
The [attribute^="value"] selector provides a powerful way to target elements based on the beginning of their attribute values. This is especially useful for styling secure links, organizing content by prefixes, or applying consistent formatting to related elements.
Updated on: 2026-03-15T12:45:51+05:30
221 Views
Advertisements