CSS combinators
CSS combinators define relationships between selectors. They allow you to select elements based on their relationship to other elements in the document tree.
For example, to style only paragraph elements that are direct children of a {{HTMLElement("div")}} , you can use the child combinator (>):
/* Set top margin on <p> elements that are direct children of <div> */
div > p {
margin-top: 0;
}
Syntax
/* Combine selectors to express relationships */
selector1 combinator selector2 {
property: value;
}
Index of combinators
- Child combinator (
>) - Column combinator (
||) - Descendant combinator (" ")
- Next-sibling combinator (
+) - Subsequent-sibling combinator (
~)