What Are Combinators?
In CSS, selectors are patterns that select the elements you want to style. While basic selectors like `h1` or `.card` are powerful, they select elements in isolation. Combinators take this a step further. They are special characters in a selector that express a relationship between two other selectors.
Think of your HTML document as a family tree. Combinators are the language you use to describe the relationships between family members: "style all descendants of this element," "style only the direct children," or "style the element that comes right after this one." Mastering them allows for precise, efficient, and readable CSS.
Descendant
Anywhere inside
Child
Directly inside
Adjacent Sibling
Immediately after
General Sibling
Anywhere after
Visualizing the Relationships
Apply a Combinator
Click the buttons below to see how each combinator selects different <p> elements in relation to the <div>.
Combinator Playground
Write Your Selector
Try writing your own selectors to target the elements on the right. Click "Run" to see the result.
Example Ideas:
A paragraph directly in the container.
An important title
- Item 1 (span)
- Item 2
- Item 3 (span)
A paragraph after the list.
A Closer Look at Each Combinator
1. Descendant Combinator ( )
The descendant combinator—represented by a single space—is the most common. It selects any element that is a descendant of the first element, no matter how many levels deep it is nested.
Example: nav a
This selector will style every single link (<a>) found anywhere inside a <nav> element.
/* Style all links within the main navigation */
nav a {
color: var(--pd);
text-decoration: underline;
}2. Child Combinator >
The child combinator is more specific. It only selects elements that are direct children of the first element. It will not select grandchildren or other deeper descendants.
Example: ul > li
This is useful for styling the items of a list without affecting items in a nested list. It selects only <li> elements that are direct children of a <ul>.
/* Add a custom bullet only to the top-level list items */
ul > li {
list-style-type: '→ ';
}3. Adjacent Sibling Combinator +
The adjacent sibling combinator selects an element that is the very next sibling of the first element. Both elements must share the same parent, and the second element must immediately follow the first in the HTML source order.
Example: h2 + p
A classic use case is to style the first paragraph that comes directly after a heading, often to serve as an introduction or lead paragraph.
/* Make the first paragraph after a heading larger */
h2 + p {
font-size: 1.125rem; /* 18px */
color: var(--text-secondary);
}4. General Sibling Combinator ~
The general sibling combinator is similar to the adjacent sibling, but less strict. It selects all sibling elements that come after the first element, as long as they share the same parent. They do not need to be immediately adjacent.
Example: input:checked ~ label
This is often used for creating "CSS-only" interactive components like custom checkboxes or toggles. When a hidden checkbox is checked, you can style its sibling label.
/* Change the label style when its sibling checkbox is checked */
input[type="checkbox"]:checked ~ label {
color: var(--pd);
font-weight: bold;
}