CSS Combination Selector
![]() | The CSS combination selector describes the relationship between the two selectors. |
---|
CSS combination selectors include various combinations of simple selectors.
Four combinations are included in CSS3:
Descendant selector ( separated by spaces )
Child element selector ( separated by greater than > sign)
Adjacent sibling selector ( separated by plus sign + )
Subsequent sibling selector ( separated by tilde ~ )
Descendant Selector
The descendant selector is used to select the descendant elements of an element.
The following example selects all <p> elements and inserts them into <div> elements:
Example
div p { background-color:yellow; }
Child Element Selector
Compared with descendant selectors, child selectors can only select elements that are direct/first-level children of an element.
The following example selects all direct child elements <p> in the <div> element:
Example
div>p { background-color:yellow; }
Adjacent Sibling Selector
Adjacent sibling selector can select the element immediately after another element, and both have the same parent element.
If you need to select an element immediately after another element, and both have the same parent element, you can use the Adjacent sibling selector.
The following example selects all the first <p> elements located after the <div> element:
Example
div+p { background-color:yellow; }
Subsequent Sibling Selector
The subsequent sibling selector selects all adjacent sibling elements after the specified element.
The following example selects all adjacent sibling elements <p> after all <div> elements:
Example
div~p { background-color:yellow; }