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 all elements with a lang attribute value starting with "en" with CSS
The CSS [attribute|="value"] selector is used to select elements with a specified attribute value that starts with the given value. This selector is particularly useful for language codes, where you want to select elements with lang attributes starting with "en" (like "en", "en-US", "en-GB", etc.).
Syntax
[attribute|="value"] {
/* CSS properties */
}
Example
The following example selects all elements with a lang attribute value starting with "en" and applies an orange border ?
<!DOCTYPE html>
<html>
<head>
<style>
[lang|="en"] {
border: 3px solid orange;
border-radius: 5px;
padding: 10px;
margin: 5px;
background-color: #fff3cd;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<p lang="en">Hello (English)</p>
<p lang="en-US">Hello from USA (American English)</p>
<p lang="en-GB">Hello from UK (British English)</p>
<p lang="no">Hei (Norwegian)</p>
<p lang="fr">Bonjour (French)</p>
</body>
</html>
The first three paragraphs (with lang="en", "en-US", and "en-GB") are displayed with an orange border, rounded corners, padding, and light yellow background. The Norwegian and French paragraphs remain unstyled as their lang attributes don't start with "en".
Conclusion
The [attribute|="value"] selector is perfect for matching language codes and hyphenated values. It selects elements where the attribute value either exactly matches or starts with the specified value followed by a hyphen.
Updated on: 2026-03-15T12:33:15+05:30
265 Views
Advertisements