Sub Selectors

Sub-selectors, also known as combinators, are used to select elements based on their relationship with other elements in the HTML structure.

Descendant Selector ( - Space)

Selects all nested elements inside a parent, regardless of how deep they are.

div p {
  color: blue;
}

✔ This will select all <p> inside any <div>.

Child Selector (> - Direct Child)

Selects only direct children of an element.

div > p {
  color: red;
}

✔ This applies to <p> elements that are directly inside a <div>, but not nested deeper.

Adjacent Sibling Selector (+)

Selects the first immediately following sibling.

h1 + p {
  color: green;
}

✔ This styles only the first <p> immediately after an <h1>.

General Sibling Selector (~)

Selects all following siblings of an element.

h1 ~ p {
  font-weight: bold;
}