=> What are CSS Selectors??

• CSS selectors is used for selecting an HTML element and apply CSS to a particular element.

• There are multiple kinds of CSS selectors let's see all of them in detail with examples.

=> CSS Element selector.

• CSS element selector is selected on the basis of the HTML element.

• Suppose if we want to apply CSS for the p tag then we can directly add p element and add CSS.

Example :

<h1>This is html code </h1>
<p>Learning CSS selectors</p>

p{
color: blue;
}

=> CSS Id Selector.

• In CSS Id selector needs to give an Id attribute to an HTML tag and that way to CSS can be applied.

• Suppose we want to apply CSS for the h1 tag then we can give the attribute name as ID and with that ID using "#" CSS code can be written.

Example:

<h1 id="learning-selector"> Apply CSS using ID selector </h1>

#learning-selector{
color: red;
text-align: center;
}

=> CSS class Selector.

• In CSS class selector needs to give an class attribute to an HTML tag and that way to CSS can be applied.

• Suppose we want to apply CSS for the h2 tag then we can give the attribute name as class and with that classname using " . " CSS code can be written.

Example:

<h1 class="learning-selector"> Apply CSS using class selector </h1>

.learning-selector{
color: red;
text-align: center;
}

=> CSS combinator Selector.

• In CSS combinator selector, CSS can be applied to parent element to child element.

Example:

<div>
  <h1 class="learning-selector"> Apply CSS using class selector </h1>
  <p>Easy to learn CSS selector</p>
</div>

div h1  {
color: cyan;
text-align: center;
}

=> CSS Pseudo-classes.

• In CSS Pseudo-classes, CSS can be applied as a hover, link active and visited.

• It can be denoted as HTML tag name and : (any pseudo-class).

Example:

<div>
  <h1 class="learning-selector"> Apply CSS using class selector </h1>
  <p>Easy to learn CSS selector</p>
</div>

h1:hover  {
color: cyan;
background-color: black;
}

=> CSS Pseudo-element-selector.

• In CSS Pseudo-classes, CSS can be applied to a specific part of a HTML element.

Example:

<div>
  <h1 class="learning-selector"> Apply CSS using class selector </h1>
  <p>Easy to learn CSS selector</p>
</div>

h1: before{
color: cyan;
background-color: black;
}