Advanced Combinators & Attributes
Go beyond classes and IDs. Learn how to target elements based on their complex relationships and HTML attributes.
Expert Answer & Key Takeaways
Go beyond classes and IDs. Learn how to target elements based on their complex relationships and HTML attributes.
1. Attribute Selectors
Attribute selectors allow you to target elements based on the presence or value of an HTML attribute. This is extremely powerful for styling inputs, links, and data-attributes.
The Example: The Smart Link Identifier
/* Target links that start with 'https' (External) */
a[href^="https"]::after {
content: " ↗";
}
/* Target images that are missing an 'alt' attribute (Warning) */
img:not([alt]) {
border: 5px solid red;
}| Selector | Syntax | Matches Elements Where... |
|---|---|---|
| Existence | [target] | The attribute exists, regardless of value. |
| Exact | [type="text"] | The value is exactly "text". |
| Contains | [href*="google"] | The value contains the string "google". |
| Prefix | [src^="/assets"] | The value starts with "/assets". |
| Suffix | [src$ ".png"] | The value ends with ".png". |
2. Sibling Combinators
Sibling combinators allow you to style an element based on the element immediately preceding it in the HTML flow.
Adjacent Sibling (+)
Targets only the first element that immediately follows another.
h2 + p {
font-weight: bold; /* Only the first paragraph after an H2 */
}General Sibling (~)
Targets all elements that follow another, provided they share the same parent.
h2 ~ p {
color: gray; /* ALL paragraphs after an H2 */
}3. Case Insensitivity
By default, attribute selectors are case-sensitive. You can add an
i flag before the closing bracket to make them ignore case.The Example:
/* Matches .PNG, .png, .PnG, etc. */
img[src$ ".png" i] {
border: 1px solid #ccc;
}🎯 Practice Challenge: Validation Styles
- Create three inputs:
type='text',type='email', andtype='password'. - Task 1: Use an attribute selector to give the
emailinput a blue border. - Task 2: Target any input that has a
requiredattribute and give it a small red asterisk using a label relationship. - Task 3: Target all links (
<a>) that end with.pdfand add a (PDF) label after them.
[!TIP] Answer to Task 3:a[href$ ".pdf"]::after { content: " (PDF)"; }
4. Senior Interview Corner
Q: What is the specificity of an attribute selector?
A: An attribute selector (like
[type='text']) has the exact same specificity as a class selector (.text-input). Both are categorized under the 'Classes, Attributes, and Pseudo-classes' column in the specificity point system (0, 0, 1, 0).Q: What is the difference between
div[data-active] and div [data-active]?A: A huge difference!
div[data-active] (no space) targets a div element that itself has the attribute. div [data-active] (with a space) is a descendant selector; it targets any element with the attribute that is inside a div.Top Interview Questions
?Interview Question
Q:Which attribute selector matches values that 'END WITH' a specific string?
A:
[attr$="val"]
?Interview Question
Q:What is the difference between + and ~ combinators?
A:
- targets the immediate next sibling, ~ targets all following siblings
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.