Selectors in CSS with Example | Types of CSS Selectors in HTML

Selectors in CSS with Example - Types of CSS Selectors in HTML

What is CSS Selector:

CSS Selector is the pattern in which we select HTML elements to set the style that we want for the webpage. We apply CSS property values inside the selected html element. CSS selectors select the html elements according to given id, class, type, attribute etc. and these are come under the CSS selectors types.

We're defining Selectors in CSS with Example below.

Types of CSS Selectors in HTML

The CSS element Selector
The CSS id Selector
The CSS class Selector
The CSS Universal Selector
The CSS Grouping Selector

The CSS element Selector:

In the CSS element Selector, we select HTML element by its element name.

For example:

If we define tag in HTML, for all elements in this web page we write the syntax as

p {
text-align: center;
color: blue;
}

The CSS id Selector:

CSS id selector is another type of CSS selector in which to select an element with a specific id, we write hash (#) and id name that we have given to HTML element. CSS id Selector is used only to select one unique or specific element.

For example:

If we define HTML element with id = "identify" then

#identify {
text-align: center;
color: blue;
}

The CSS class Selector:

For CSS class selector, we use period character or dot (.) with the defined class name of HTML element.

For example:

If we define HTML element with class = "group" then

.group {
text-align: center;
color: blue;
}

We can also set this class CSS for the particular specific HTML element with class name like we have a tag as This is EDUGYAN paragraph.

p.group {
text-align: center;
color: blue;
}

The CSS Universal Selector:

Universal means for all we applying the style. For universal selector, we use universal selector (*) that selects all HTML elements in the webpage.

For example:

* {
text-align: center;
color: blue;
}

The CSS Grouping Selector:

Grouping selector is used to set the same styling for multiple HTML elements that we have defined in the webpage.

For example:

If we have h1, h3 and p tags or HTML elements and we want to set the style for these 3 HTML elements. So consider that we set style like-

h1 {
text-align: center;
color: blue;
}

h3 {
text-align: center;
color: blue;
}

p {
text-align: center;
color: blue;
}

To minimize or reduce line of code, we use CSS Grouping Selector. To grouping selectors, we separate each selector or HTML elements with a comma.

For example:

h1, h3, p {
text-align: center;
color: blue;
}

Looking Forward:

https://t.co/SH4anbaqnY #selectorsincss #selectors #typesofselectorsincss #simpleselectorsincss #groupingselectorsincss #css #html #cascadingstylesheet #webdesign #webdevelopment #edugyan
Follow -- @EDUGYAN1
— EDUGYAN (@EDUGYAN1) June 13, 2020

For more details - Selectors in CSS with Example - Types of CSS Selectors in HTML - CSS Selectors - Best Programming Videos on YouTube - EDUGYAN Channel

Selectors in CSS with Example | Types of CSS Selectors in HTML