Combinators

Selectors are an essential part of CSS, as they determine which elements to apply styles to. In CSS, selectors can be combined to create more complex selection patterns. Combinators are special characters that are used to combine selectors in different ways.

The most basic combinator is the space combinator. It is used to select an element that is a descendant of another element. For example, if you want to select all paragraphs that are descendants of a div element, you can use the following selector:

.selector p {
  /* 
  Descendant Selector
  - select all descendats of specified element
  1, 2, 3 */
  background: yellow;
}

The next combinator is the greater-than sign (>), which is used to select an element that is a direct child of another element. For example, if you want to select all list items that are direct children of an unordered list element, you can use the following selector:

ul > li {
  /* Styles go here */
}

The next combinator is the tilde (~), which is used to select elements that are siblings of another element. For example, if you want to select all paragraphs that come after a heading element, you can use the following selector:

h1 ~ p {
  /* Styles go here */
}

The next combinator is the plus sign (+), which is used to select the element immediately following another element. For example, if you want to select the first paragraph that comes after a heading element, you can use the following selector:

.selector + p {
  /*
  Adjacent Sibiling Selector
  - select first sibiling element to a specified element
  4 */
 
  background: blue;
}

Finally, the last combinator is the pipe (|), which is used to select elements that have a specific attribute with a value that starts with a certain string. For example, if you want to select all elements that have a lang attribute with a value that starts with “en”, you can use the following selector:

[lang|="en"] {
  /* Styles go here */
}

Combinators can be combined to create even more complex selection patterns. For example, if you want to select all paragraphs that are direct children of a div element and come after a heading element, you can use the following selector:

div > h1 + p {
  /* Styles go here */
}

See the Pen Untitled by Projects Engine (@projectsengine) on CodePen.

By using combinators, you can create more specific and targeted styles for your HTML elements, which can help to make your website more visually appealing and easier to navigate.