What are Selectors?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Types of selectors?

1. Universal Selector

This is useful when you want to set a style for all the elements of an HTML page or for all of the elements within an element of an HTML page. An asterisk ( i.e. "*" ) is used to denote a CSS universal selector.

* {
    background-color: yellow;
}

2. Individual Selector

This is used for selecting a div, img, section, etc tags.

div {
    background-color: red;
}

3. class and id Selector

This is used for targeting a class or an id with the help of . or an * asterisk.

.container {
    background-color: green;
}

4. Chained Selectors

Chained selectors are combined selectors, inside an element, Direct child, sibling selectors.

Combined selectors use elements along with all classes defined in it.

.container .hero-img .col {
    background-color: orange;
}

5. Combined Selectors

Combined selector targets all classes or div separated by a comma ',' and applies to every element

.container , .hero-img , .col {
    background-color: turquoise;
}

6. Inside an element

Selecting a child div inside a parent can be done using '>'

div > p {
    background-color: turquoise;
}

7. Direct Child

Selecting a child div inside a parent can be done using space

div p {
    background-color: turquoise;
}

8. sibling ~ or +

Targeting a sibling div can be done using '~' or '+'.

div + p {
    background-color: turquoise;
}

CSS Selectors