Common CSS Combinators

common-combinators.css

/* Descendant Selector */
/* Matches all elements that are descendants of a specified element. */
.box p {
    color: red;
}

/* Child Selector */
/* A greater-than symbol (>), which matches only when the selectors select elements that are direct children. Descendants further down the hierarchy don't m*/

.box > p {
    color: red;
}

/* Adjacent Selector */
/* Used to select something if it is right next to another element at the same level of the hierarchy. */

.box + p {
    color: red;
}

/* General Sibling Selector */
/* If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). */

.box ~ p {
    color: red;
}