Table of contents
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;
}