CSS Selectors

Table of contents

No heading

No headings in the article.

=> 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;
}