CSS Combinators
CSS Combinators
Select all <p> components inside the <div> element:
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3. Not in a div.
A CSS selector can contain more than one basic selector. Between the basic selectors, we can incorporate a combinator.
There are four diverse combinators in CSS3:
- descendant selector (space)
- child selector (>)
- adjacent kin selector (+)
- general kin selector (~)
Descendant Selector
The relative selector coordinates all components that are relatives of a predetermined element.
The following precedent chooses all <p> components inside <div> elements:
Child Selector
The kid selector chooses all components that are the prompt offspring of a determined element.
The following precedent chooses all <p> components that are prompt offspring of a <div> element:
Adjacent Sibling Selector
The neighboring kin selector chooses all components that are the nearby kin of a predefined element.
Sibling components must have a similar parent component, and "adjacent" implies "immediately following".
The following model chooses all <p> components that are put following <div> elements:
General Sibling Selector
The general kin selector chooses all components that are kin of a predetermined element.
The following model chooses all <p> components that are kin of <div> elements: