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.

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)


Descendant Selector

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:

Example

div p { background-color:yellow; }
Try it yourself »

Child Selector

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:

Example

div>p { background-color:yellow; }
Try it yourself »

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:

Example

div+p { background-color:yellow; }
Try it yourself »

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:

Example

div~p { background-color:yellow; }
Try it yourself »