What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Relational selectors in CSS3—also called combinators—match elements according to their position in the document tree. A space selects descendants, > selects direct children, + selects the immediately following sibling, and ~ selects all later siblings with the same parent. Attribute selectors match elements by the presence, exact value, token, prefix, suffix, or substring of an HTML attribute.
What relational selectors mean
The W3C defines selectors as patterns that match elements in a document tree. A selector is made from simple selectors separated by combinators; the final simple-selector sequence identifies the element that receives the style. Combinators do not add specificity—they only describe the relationship that must exist for a match.
Descendant combinator: A B
A space between selectors matches every B element at any depth inside an A element. Other elements may occur between them.
article p {
line-height: 1.6;
}This matches paragraphs directly inside article and paragraphs nested in sections, blockquotes, or other descendants of that article.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
Child combinator: A > B
The child combinator matches B only when it is an immediate child of A.
nav > ul {
list-style: none;
}A nested ul inside an li is not matched by this selector, because it is not a direct child of nav. Use a descendant selector when any nesting level is intended.
Adjacent-sibling combinator: A + B
The adjacent-sibling, or next-sibling, combinator matches B only when it immediately follows A and both elements share a parent.
h2 + p {
margin-top: 0;
}Only the first paragraph directly after each heading is selected. If another element appears between the heading and paragraph, there is no match.
Rank #2
General-sibling combinator: A ~ B
The general-sibling, or subsequent-sibling, combinator matches every later B that shares a parent with A. Intervening nodes or elements do not prevent a match.
h2 ~ p {
color: #555;
}This selects all paragraphs after the heading under the same parent, not paragraphs nested inside a different element.
Relational selector comparison
| Syntax | Relationship | What it matches | Typical use |
|---|---|---|---|
A B |
Descendant | Any B nested at any depth in A |
Style all links within a component |
A > B |
Direct child | A B whose parent is A |
Target only the component’s first-level structure |
A + B |
Adjacent sibling | A B immediately following A |
Adjust the first element after a heading |
A ~ B |
General sibling | Every later B sharing A‘s parent |
Style all content following a marker |
Choosing the narrowest relationship that reflects the markup usually makes styles safer when nested components are added later. A descendant selector is intentionally broad; a child or sibling selector limits the effect to a particular structural level.
Attribute selectors in CSS3
Attribute selectors represent an element’s attributes and compare their values without requiring a class solely for styling. Attribute names and matching rules are interpreted according to the document language.
Presence and exact-value matching
input[disabled] {
opacity: .5;
}
a[href="https://example.org"] {
color: green;
}[attr]matches when the attribute exists, regardless of its value.[attr=value]matches when the complete attribute value equalsvalue.
For exact matching, quote values when they contain characters that are not valid unquoted identifiers; quoting all string values is a clear, consistent practice.
Whitespace-token matching: [attr~=value]
This operator treats the attribute as a whitespace-separated list and matches when one complete token equals the requested value.
a[rel~="tag"] {
text-decoration: underline;
}It can match rel="tag external", but not a token such as tagged.
Language-style matching: [attr|=value]
This operator matches an exact value or the value followed by a hyphen. It is useful for language-like codes.
Free tools Windows power users keep installed
One-click scans. No signup required.
[lang|="en"] {
quotes: '“' '”';
}The selector matches lang="en" and lang="en-US", but not lang="english".
Prefix, suffix, and substring matching
| Operator | Match shape | Example |
|---|---|---|
^= |
Value starts with the string | a[href^="#"] selects fragment links |
$= |
Value ends with the string | a[href$=".pdf"] selects PDF links |
*= |
Value contains the string anywhere | a[href*="example"] selects values containing “example” |
a[href^="#"] {
background: gold;
}
a[href$=".pdf"] {
font-weight: 700;
}
a[href*="example"] {
outline: 1px solid;
}Substring operators are convenient but broad. Use them only when the portion of the value is stable enough to be a styling contract; a class or a dedicated data attribute is usually more maintainable for application state.
The CSS3 specification notes that an empty value matches nothing for these substring operators.
Case sensitivity and namespaces
Case behavior depends on the document language. In HTML, attribute names and enumerated values are generally case-insensitive. Values of class, id, data-*, role, and aria-* are case-sensitive by default, so match the value exactly unless you deliberately request another behavior.
Recommended Free Tools
Where supported, an i modifier requests ASCII case-insensitive matching and an s modifier requests ASCII case-sensitive matching:
a[href$=".ORG" i] {
text-transform: uppercase;
}
[data-kind="Card" s] {
border: 1px solid;
}Selectors Level 3 also permits namespace-qualified attribute names such as [foo|att=value] after a namespace has been declared. This is mainly relevant to XML, SVG, and documents mixing namespaces rather than ordinary HTML.
Combining relational and attribute selectors
Selectors can be combined into compound and complex selectors. In this example, the paragraph must be a direct child of an open article and immediately follow a paragraph with the note class:
article[data-state="open"] > p.note + p {
margin-top: 0;
}articleandpare type selectors.[data-state="open"]is an attribute selector..noteis a class selector.>and+impose the structural relationships.
Changing the markup can therefore change the match even when the element names remain the same. Test selectors against the actual DOM structure, including optional wrappers inserted by templates or components.
Specificity of these selectors
The W3C specificity algorithm compares a tuple built from IDs, then classes/attributes/pseudo-classes, then type selectors and pseudo-elements. The universal selector contributes nothing, and combinators contribute nothing.
For article[data-state="open"] > p.note + p, the attribute selector and class selector add to the middle component, while article and the two p selectors add to the type component. Adding another combinator does not by itself make a rule more specific. If a rule is difficult to override, reduce unnecessary selector detail or use a clearly layered stylesheet rather than adding more structural conditions.
CSS3 scope versus newer selector features
Selectors Level 3 became a W3C Recommendation on 6 November 2018 and includes the four combinators and attribute operators described here. Current documentation also covers Selectors Level 4. Features such as :has() belong to that newer generation and should not be presented as CSS3 syntax. When supporting older browsers, verify the feature set for the browsers and document modes you actually target.
Quick Recap
A practical selection checklist
- Use a space when any descendant depth is correct.
- Use
>when only direct children should match. - Use
+for one immediate next sibling. - Use
~for all later siblings under the same parent. - Choose presence, exact, token, language-prefix, prefix, suffix, or substring matching based on the attribute’s real format.
- Check case behavior in the document language and add
iorsonly when supported and intentional. - Prefer stable semantic attributes or classes over fragile substrings in generated URLs or text.
- Remember that relationships affect matching, not specificity.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
