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 rel="nofollow" with CSS
The CSS attribute selector [attribute="value"] allows you to select elements that have a specific attribute with an exact value. This is particularly useful for targeting links with rel="nofollow" attributes.
Syntax
selector[attribute="value"] {
property: value;
}
Example
The following example demonstrates how to select and style all anchor elements with rel="nofollow" −
<!DOCTYPE html>
<html>
<head>
<style>
a[rel="nofollow"] {
border: 3px solid blue;
background-color: #f0f8ff;
padding: 5px;
text-decoration: none;
border-radius: 4px;
}
a {
display: inline-block;
margin: 10px;
color: #333;
}
</style>
</head>
<body>
<a href="https://example.com/page1" rel="nofollow">Nofollow Link 1</a>
<a href="https://example.com/page2" rel="noreferrer">Normal Link</a>
<a href="https://example.com/page3" rel="nofollow">Nofollow Link 2</a>
<a href="https://example.com/page4">Regular Link</a>
</body>
</html>
Only the links with rel="nofollow" (Nofollow Link 1 and Nofollow Link 2) appear with blue borders, light blue background, and padding, while the other links display normally.
Conclusion
The [attribute="value"] selector is perfect for targeting specific elements based on their attribute values. This technique is commonly used for styling external links, form elements, or any elements with particular data attributes.
Updated on: 2026-03-15T12:31:32+05:30
373 Views
Advertisements