What is a selector and what selector types do you know?

The selector is a pattern used to select the elements you want to style.

There are many different selector types. But the main selector types you should know are the following:

Class selector (.my-class)

The class selector consists of dot character and class name. This selector is applied to all elements that have the class attribute with the same value as the string following after the dot.

Example:

Selector .my-class will select all elements that have attribute class="my-class".

ID selector (#my-id)

The ID selector consists of hash character and class name. This selector is applied to all elements that have the id attribute with the same value as the string following after the dot.

Example:

Selector #my-id will select all elements that have attribute id="my-id".

Tag selector (tag)

The tag selector consists of tag name. This selector is applied to all elements that are defined by tag with the same name as the selector.

Example:

Selector div will select all elements that are based on div tag.

* selector

The * selector is applied to all elements.

Example:

The selector * will select all elements. So the style will be applied to every single element that is defined in the HTML web page.