Select all <p> components inside the <div> element:
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3. Not in a div.
CSS combination selectors include various combinations of simple selectors.
Four combinations are included in CSS3:
- Descendant selectors (separated by spaces)
- Child element selectors (separated by greater than signs)
- Adjacent sibling selectors (separated by a plus sign)
- Common sibling selectors (separated by dashes)
The descendant selector is used to select descendant elements of an element.The following example selects all <p> elements and inserts them into a <div> element:
Compared to descendant selectors, Child selectors can only select elements that are child elements of an element.The following example selects all immediate children <p> in the <div> element: element:
Adjacent Sibling Selector
Adjacent sibling selector selects 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 after the <div> element:
General Sibling Selector
Subsequent sibling selectors select all adjacent siblings after the specified element.
The following example selects all adjacent sibling elements <p> after all <div> elements: