CSS combinators are explaining the relationship between selectors. A CSS selector includes more than one simple selector. The CSS combinators are included in between the simple selector.
By using class or ID isn’t the only way to style some parts of your document differently. Our more complex selectors give you the idea to select elements based on where they are in the document.
The following are four different Combinators and they work by combining other selectors.
- Descendant Selector
- Child Selector
- Adjacent Sibling Selector
- General Sibling Selector
Descendant Selector
This selector is used to select all the elements that are descendants of a specified parent. The tags can be the direct child of the specified tag or can be very deep in the specified tag.
If you want to use a descendant selector you can specify a parent selector and then the element that you wish to style.
Child Selector
This selector is used to select all elements that are immediate children of a specified parent.
The descendant selector will select all children, even if there are other elements in-between the parent and child. But the child combinator selects only the second selector if it has the first selector element as its parent.
Adjacent Sibling Selector
The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector. This combinator selects only one tag that is just next to the specified tag.
General Sibling Selector
The general sibling selector works in a similar way to the adjacent sibling but will select all siblings that come after the specified element – even if they are not adjacent to each other. This can be used to select a group of elements that share the same parent element.