Today we learn how CSS selectors help to improve the HTML elements for the style of the elements.
In CSS, selectors are used to targeting the HTML elements on your web pages that you want to style. There are many types of selectors available.
A CSS selector is the first part of a CSS rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
With the help of selectors, we style the HTML element.
Types of Selectors:
Universal selector
Individual selector
Class and Id selector
And selector
combined selector
Inside selector
Direct Child selector
Sibling selector ~ or +
How to use selectors
There are two ways to use the CSS selectors. The first way is to write HTML and CSS in the same document.in this case, we can write CSS in <head> section of HTML code.
These all selectors we write only in the CSS code file.
The other way is writing CSS in a separate file and linking it to the HTML file.
Universal selector:
The Universal Selector helps to select all elements on that page.
It represented with the *
This is an example:-
*{
background-color:#5DA3FA;;
}
Result:-
Individual Selector:
In the individual selector, we direct select the name of that HTML element and add the CSS property values inside the rule applied to them.
*This is HTML code*
<span>
Welcome to internet.
</span>
*This is CSS code*
span{
background-color: #E21717;
color: white;
}
Result:-
Class & ID Selector:
Class Selector: Select all elements with the class attribute.
**syntax: .**classname
Id Selector: Select an element based on the value of its attribute.
syntax: #idname
This is class selector
.code{
background-color: #F4BE2C;
color: #120E43;
}
This is ID selector
#git{
background-color: #0D0D0D;
color: #ffffff;
}
And Selector:
In the and selector we select more than one class and add the CSS property values.
syntax: .class1.class2
.bg-black.text-white{
background-color: #46B2E0;
color: #ffffff;
}
Combined Selector:
In the combined selector method that selects all the matching nodes.
syntax: p,h1
p,h1{
background-color: #E07C24;
}
Inside selector:
The " " (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
div ul li{
background-color:#207398;
color:#ffffff
}
Direct Child selector:
The > sign shows that is the direct child of the first element.
syntax: A>B
div>li{
background-color: #383CC1;
color: #F4BE2C;
}
Sibling selector ~ or + :
The ~ and + combinator selects siblings. This means that the second element follows the first and both share the same parents.
This is HTML code
<p>Robot 1</p>
<p>Robot 2</p>
<p class="sibiling">Robot 3</p>
<p>Robot 4</p>
<p>Robot 5 </p>
This is the css code
.sibiling+p{
background-color: #35BDD0;
color: #ffffff;
}
and the result is
Pseudo Selector (::before and ::after)
In CSS pseudo-elements are used to style specified parts of an element.
Pseudo-elements are used to add CSS to documents without adding unnecessary markup. pseudo-elements are like virtual elements that do not exist in the document tree. The Content property is always used in the pseudo-element. :: before and:: after the content is placed before and after the content of the element.
The:: before pseudo-element:-
The:: before pseudo-element can be used to insert some content before the content of an element.
<!-- This is the HTML code -->
<h1 class="quote">Don't look back. Something might be gaining on you.</h1>
<!-- we give style to H1 element in the css file -->
<!-- Here is the css code -->
.quote::before{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: coral;
border-radius: 5px;
}
Result:-
In this image, there is a small box that appears before the quote with the help of the::before pseudo-element.
The:: after pseudo-element:-
The:: after pseudo-element can be used to insert some content after the content of an element.
<!-- This is the HTML code -->
<h1 class="quote">Don't look back. Something might be gaining on you.</h1>
<!-- we give style to H1 element in the css file -->
<!-- Here is the css code -->
.quote::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: coral;
border-radius: 5px;
}
Result:-
In this result, there is a small box that appears after the quote with the help of the:: after pseudo-element.
The before and after pseudo-element is very simple to use, and with that help, you can make very creative content.
There are also a few common pseudo-classes:-
: hover
: active
: visited
: focus
Now we see these some pseudo-classes in the details:-
: hover attribute:-
The hover is a CSS pseudo-class. it matches when the user interacts with an element with a pointing device but does not necessarily activate it. it is generally triggered when the user having hover the element with the cursor (mouse pointer)
syntax: a: hover
Example :
<!-- This is a HTML code -->
<a href="https://www.holyorganic.co.in">Pure oil</a>
<!-- This is a CSS code -->
a:hover{
color: darksalmon;
background-color:aqua;
}
Result without hovering:-
and when you hover your mouse over the link the result is -
: visited attribute:-
The visited is a CSS pseudo-class that applies once the link has been visited by the user.
syntax-: visited
Example:-
<!-- This is a HTML code -->
<a href="http://www.holyorganic.co.in" target="_blank">Pure oil</a>
<!-- This is a CSS code -->
a:visited{
color: #03203C;
font-size: 20px;
}
results appear when before the visit link
and when we visit the link this magic happens(color has been changed):-
: Link attribute:-
The link attribute is a CSS pseudo-class that applies once
the link has been visited by the user.
: Focus attribute:-
The focus is a CSS pseudo-class that represents an element that has received focus.
it is generally triggered when the user clicks or taps on an element or selects it with the keyboard "tab" key.
syntax:- : focus
in our example, we see when we click on the box that has been getting focused or he changes the property.
<!-- This is a HTML code -->
<form action="">
<label for="Name">Name</label>
<input type="text"><br><br>
<label for="Password">Password</label>
<input type="password" name="Password" id="">
</form>
<!-- This is a CSS code -->
input:focus{
background-color: #46B2E0;
padding: 12px;
}
and the result is when we click that box is
see you in the next amazing blog.
Thank you for reading.