HTML and CSS refresher - Selectors Part 1

HTML and CSS have come a long way. Coming back to front-end development after years of backend development seems so alien. This note would aim to be a refresher and knowledge guide. This may turn into a series.

Understanding CSS selectors

Link to codepen for this note, with a working example of snippets used below.

All elements

* selector helps in selecting all elements.

* {
    background-color: lightgray;
}

All elements with specified HTML tag

htmlTag {
    ...
}

/* All <p> elements */
p {
    font-style: italic;
}

All elements within the element with specified HTML tag

htmlTag * {
    ...
}

/* All elements inside all <div> elements */
div * {
    font-size: 2rem;
}

All elements with HTML tag2 within HTML tag1

htmlTag1 htmlTag2 {
    ....
}

/* All <span> elements inside <p> elements. */
p span {
    color: green;
}

All HTML tag1 and HTML tag2 elements

htmlTag1, htmlTag2 {
    ...
}

/* All <h2> and <h3> elements */
h2, h3 {
    background-color: pink;
}

All HTML tag2 which are child of HTML tag 1

htmlTag1 > htmlTag2 {
    ...
}

/* All <h2> which are child of any <p> */
p > h2 {
    background-color: aquamarine;
}

HTML tag2 preceded by HTML tag 1

htmlTag1 + htmlTag2 {
    ...
}

/* <p> immediately after <h1> i.e. not to the second <p> */
h1 + p {
    color: red;
}