WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Combinators


CSS Combinators

Select all <p> components inside the <div> element:

Div (parent)

Paragraph 1 in the div.

Div 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: 

Example

div p {
    foundation shading: hotpink;
}
Try it yourself »

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:

Example

div > p {
    foundation shading: hotpink;
}
Try it yourself »

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:

Example

div + p {
    foundation shading: hotpink;
}
Try it yourself »

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: 

Example

div ~ p {
    foundation shading: hotpink;
}
Try it yourself »