CSS Combinators
CSS combinators are used to select elements based on their relationship to other elements. There are four types of CSS combinators:
Descendant selector (space
)
The descendant selector is used to select all elements inside another element.
As an example:
/* styles for all <p> elements inside .container */
}
Child selector (>
)
The child selector is used to select all direct children of an element.
As an example:
.container > p {
/* styles for all <p> elements that are direct children of .container */
}
Adjacent sibling selector (+
)
The adjacent sibling selector is used to select the element immediately after another element.
As an example:
h2 + p {
/* styles for the first <p> element after every <h2> element */
}
General sibling selector (~
)
The general sibling selector is used to select all siblings that come after an element.
As an example:
h2 ~ p {
/* styles for all <p> elements that come after every <h2> element */
}
These combinators can also be combined with other CSS selectors to create more specific styles.
As an example:
.container .special p {
/* styles for all <p> elements inside .container with the .special class */
}
And the child selector can be combined with an ID selector to target a specific element that is a direct child of another element.
As an example:
#container > #special {
/* styles for the element with the ID of "special" that is a direct child of the element with the ID of "container" */
}