Posts in current category

CSS combination selector


May 03, 2021 22:00 CSS


Table of contents


CSS combination selector

The CSS combination selector gives you an intuitive understanding of the relationship between the selector and the selector.

CSS combination selector

CSS combination selector The combined selector illustrates the direct relationship between the two selectors.

CSS combination selectors include a variety of simple selectors.

There are four combinations included in CSS3:

  • Descendant picker (separated by spaces)
  • Child element selector (separated by greater than sign)
  • Adjacent Brother Selector (separated by plus sign)
  • Ordinary Brother Selector (separated by a wavy sign)

Descendant picker

The descendant picker matches the descendant elements of all specified elements.

The following example selects all the elements to be inserted into the elements:

div p
{
background-color:yellow;
}

Try it out . . .

Child element selector

Child selectors can only select elements that are child elements of an element compared to descendant selectors.

The following example selects all direct child elements in the element.

div>p
{
background-color:yellow;
}

Try it out . . .

Adjacent Brother Selector

Adjacent Sibling selector selects elements that are immediately behind another element and have the same parent element.

If you need to select an element that is immediately behind another element, and both have the same parent element, you can use the adjacent sibling selector.

The following example selects all the first and most lt;p.gt; elements that are located behind the .lt;div.gt;

div+p
{
background-color:yellow;
}

Try it out . . .


Normal adjacent brother selector

The Normal Brother Selector selects adjacent brother elements for all specified elements.

The following example selects all the adjacent brother elements after all the elements .

div~p
{
background-color:yellow;
}

Try it out . . .