CSS Selector: There are some selectors used in CSS, which allows us to choose the content we wish to style. Various selectors are considered as the separation of the set of CSS rules. They choose elements of HTML based on its class, type, id, and attribute.

Here are some selector types in CSS which are as follows:

  • Element Selector
  • Id Selector
  • Class Selector
  • Universal Selector
  • Group Selector

Element Selector

The element selector of CSS is used to select the element of HTML by the name. The example of element selector is as follows:

Output:

CSS Selector

Id Selector

This selector of CSS selects the HTML element’s attribute id to choose a particular element. The id is always considered special inside the page. Thus, it is selected to choose a unique and single element. The id is defined with a hash character (#), pursued by the element’s id.

The example of id selector is as follows which is defined with id “p”:

Output:

CSS Selector

Class Selector

These selectors choose the elements of HTML along with a particular attribute of class. A class selector can be used with the period character (Full stop). It is pursued by the name of the class. Usually, a class must not be begin with the number.

The example of the class selector is shown below:

In this, a class is represented by “class1”:

Output:

CSS Selector

Specific Element Selector: To define a specific element of troubled HTML, we can use the name of the element with the class selector.

Following is an example for selecting a specific element:

Output:

CSS Selector
  • Various elements of HTML can also be referred to as one or more classes.

Example:

In the following example, element <p> is written according to the class=”class1” and to the class=”large”:

Output:

CSS Selector

Universal Selector

CSS has a unique kind of selector i.e., universal selector. It is applied on the elements as the wildcard character. These selectors select every element which is displayed over the page.

The example of universal selector is as written as below:

Output:

CSS Selector

Group Selector

Various group selectors of CSS are applied to select every element including similar style definitions. A lengthy code can be reduced by the use of the group selectors. Commas can be used to isolate all the selectors in the grouping.

Take a look on the following code i.e., written without the use of group selector:

We need to describe the properties of CSS for every element. These properties are grouped in the following ways:

Output:

CSS Selector

Pin It on Pinterest

Share This