Author
When you move beyond CSS basics, you enter the world of core styling techniques. At this stage, you learn how to create modern layouts, add advanced text and background effects, and manage how elements are stacked or positioned on a page. Let’s explore step by step.
When working with CSS, selectors play a crucial role in deciding which elements you want to style. While basic selectors like element (p), class (.class), and ID (#id) are widely used, CSS also provides a powerful feature called Attribute Selectors. These allow you to target elements based on their attributes and attribute values.
If you’ve ever wanted to style links with target="_blank", form fields with required, or even images with a specific alt text, attribute selectors are your best friend.
Attribute selectors let you style elements based on the presence or value of an attribute. Instead of just targeting by tag, class, or ID, you can go deeper and apply styles only if a certain attribute exists or matches a pattern.
For example:
input[type="text"] {
border: 2px solid blue;
}
[attr] – Attribute Presence SelectorThis selector applies styles to all elements that have a specific attribute, no matter what value it holds.
Commonly used in forms to highlight fields like required.
input[required] {
border: 2px solid red;
background-color: #fff0f0;
}
[attr="value"] – Exact Attribute Value SelectorTargets elements where the attribute matches exactly the given value.
Useful for styling links, buttons, or inputs with specific attribute values.
a[target="_blank"] {
color: green;
text-decoration: underline;
}
[attr~="value"] – Attribute Contains Word SelectorMatches elements if the attribute value contains a specific word (separated by spaces).
Great for highlighting content tagged with certain keywords.
[title~="tutorial"] {
background: yellow;
font-weight: bold;
}
[attr|="value"] – Attribute Starts with Value or Value-Mainly used for language attributes or hyphen-separated values.
Helpful for multilingual websites (lang="en-US", lang="fr-CA", etc.).
[lang|="en"] {
font-style: italic;
}
[attr^="value"] – Attribute Starts With SelectorMatches elements where the attribute value begins with the given string.
Often used to target secure links (https) or assets stored in a specific folder.
a[href^="https"] {
color: blue;
font-weight: 600;
}
[attr$="value"] – Attribute Ends With SelectorSelects elements where the attribute value ends with a particular string.
Commonly used to style file types like .png, .jpg, or .pdf.
img[src$=".png"] {
border: 3px solid orange;
border-radius: 8px;
}
[attr*="value"] – Attribute Contains Substring SelectorMatches elements where the attribute contains the given substring anywhere.
Useful for styling links with certain keywords (like login, signup, or product).
a[href*="login"] {
color: red;
font-weight: bold;
}
Forms often contain multiple input fields like text, email, password, etc. Instead of adding separate classes to each input type, you can style them directly based on their type attribute. This keeps the HTML cleaner and the CSS more precise.
input[type="email"] {
background-color: #f0f8ff;
}
Not all links behave the same. For example, links with target="_blank" open in a new tab. You can style them differently to give users a clear visual cue that the link will open externally. Adding an icon or color change improves usability.
a[target="_blank"]::after {
content: " ?";
}
Websites often use many images, but sometimes you need to style a specific group — like logos, icons, or banners. Instead of assigning a class to each, you can use attribute selectors to target them based on file names or alt text.
img[alt*="logo"] {
width: 150px;
}
Modern websites use ARIA (Accessible Rich Internet Applications) attributes for accessibility. You can style or hide elements dynamically depending on these attributes. For example, elements with aria-hidden="true" should be hidden from users.
[aria-hidden="true"] {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Attribute Selectors Short Demo</title>
<style>
/* 1. Presence */
input[required] { border: 2px solid red; }
/* 2. Exact value */
a[target="_blank"] { color: green; }
/* 3. Contains word */
[title~="tutorial"] { background: yellow; }
/* 4. Starts with value- */
[lang|="en"] { font-style: italic; }
/* 5. Starts with */
a[href^="https"] { color: blue; }
/* 6. Ends with */
img[src$=".png"] { border: 3px solid orange; }
/* 7. Contains substring */
a[href*="login"] { color: red; }
</style>
</head>
<body>
<h2>1. [attr] Presence</h2>
<input type="text" required placeholder="Required field">
<input type="text" placeholder="Optional field">
<h2>2. [attr="value"] Exact</h2>
<a href="page.html" target="_blank">Opens in new tab</a> |
<a href="page.html" target="_self">Same tab</a>
<h2>3. [attr~="value"] Contains Word</h2>
<p title="css tutorial">This has "tutorial"</p>
<p title="css-guide">This has no tutorial</p>
<h2>4. [attr|="value"] Starts with Value-</h2>
<p lang="en">English</p>
<p lang="en-US">English (US)</p>
<p lang="english">Not matched</p>
<h2>5. [attr^="value"] Starts With</h2>
<a href="<https://secure.com>">Secure Link</a> |
<a href="<http://insecure.com>">Insecure Link</a>
<h2>6. [attr$="value"] Ends With</h2>
<img src="<https://via.placeholder.com/80.png>" alt="PNG">
<img src="<https://via.placeholder.com/80.jpg>" alt="JPG">
<h2>7. [attr*="value"] Contains Substring</h2>
<a href="/user/login">Login Link</a> |
<a href="/about">About</a>
</body>
</html>