Hi Folks, In this article we are going to see types of selectors in CSS, As we know to implement CSS in our HTML code, we need to select our HTML element. So there are many ways to select target elements.
Types of Selectors in CSS
Basic Selectors
Advanced Selectors
Types of Basic Selectors
Tag/Element
Class
Id
Attribute
Universal
Types of Advanced Selectors
Combinators
Pseudo-Classes
Pseudo-Elements
Basic Selectors
Tag/Element
We apply CSS by selecting the name of an element.
e.g.
h1 , h2 , p{
color: blue;
}
As we can see, we can select multiple element just by separating them by commas and can change their property.
Class
Class is an attribute which has been given to multiple element, so we can apply same property to all those element which has same class.
e.g.
<h1 class="heading"> Intro to Cascading Style Sheet</h1>
<h2 class="heading">Types of selectors</h2>
<h3 class="heading">Basic and Advanced</h3>
.heading{
color: brown;
background-color: aquamarine;
}
As we can see, we changed the property of all three headings just by giving them same class, we didn't select the each element separately. We mostly use class when we want to apply same CSS to multiple elements.
Note:- we select class name with dot(.) , e.g. ( .headings).
ID
Id is also an attribute, but Id is unique for each element. we use ID's when we don't want to apply same CSS on multiple element. e.g.
<h1 id="Head"> Intro to Cascading Style Sheet</h1>
<h1 >Types of selectors</h1>
<h1 >Basic and Advanced</h1>
As we have three h1's but we only want to change property of first h1, If we select it by name <h1>, then all <h1> would be selected, so we'll give one ID to first h1 and apply CSS.
#Head{
color:black ;
background-color: bisque;
}
Note:- we select ID name with hash(#) e.g. ( #Head).
4. Attribute Selector
- We select our element just by name of the attribute. e.g.
<input type="text" placeholder="Name">
<input type="password" placeholder="password">
input[type="text"]{
background-color:aquamarine;
color: black;
font-weight: 900;
}
input[type="password"]{
background-color: bisque;
color: black;
font-weight: 900;
}
5.Universal Selector
Universal selector is a special type of selector which selects the whole HTML code. we usually use it to apply same font family to our whole code, or to make margin padding zero of the page.
*{
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
}
Advanced Selectors
1.Combinators
combinators are further divide into 4 types.
Descendant Selector
Child Selector
General Selector
Adjacent Selector
1.A Descendant Selector
In descendant selector, we select the upcoming generation elements(children) of any particular element and the catch is, it doesn't necessary that child should be direct child , we can select any child of upcoming generation.
e.g.
<section>
<h1>Hello world</h1>
<h2>Heading 2</h2>
<h3>
<h1>Heading 3</h1>
<h2>Heading 4</h2>
<p>This is our target element</p>
</h3>
</section>
descendant selector separated by space ( " "), it is combination of two or more elements, where first element represent the parent and second element represent the child, parent element could be grand parent, great grand parent etc.
section p{
color: red;
font-weight: bold;
}
As we can see, we target the p element through section tag , as p is not a direct child of section, rather section is a grand parent of p.
1.B Child Selector
In Child Selector, we select the direct child of an element, child selector is represented by (>). e.g.
<section>
<h1>Hello world</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 4</H3>
</section>
section > h1{
color: blue;
font-family: cursive;
}
1.C General Sibling Selector
In this selector, we select the all the siblings of a particular element. e.g.
<section>
<p>This is para</p>
<h1>Hello world</h1>
<p>This is para</p>
<p>This is para</p>
<p>This is para</p>
</section>
h1~P{
color: blue;
font-weight: 900;
}
Note:- We cannot select the left siblings of specified element because code runs from Top to Bottom and Left to Right
1. D Adjacent Selector
In adjacent selector, we selector the element placed just next to a specified element. e.g.
<section>
<div>
<p>Para 1</p>
</div>s
<p>Para 2</p>
<p>Para 3</p>
<p>Para 4</p>
</section>
div + p{
color: blue;
font-size: 2rem;
}
Same we cannot select the left adjacent element of our specified element because code runs from Top to Bottom and Left to Right
Difference between Descendant and Child Selector
In child selector we can only target the direct child of specific element and In descendant selector we can target element of any generation like child, grand child , great grand child etc.
Difference between General Sibling and Adjacent Selector
In General Sibling we target all the siblings of a specific element and In adjacent selector we can only target the element just next to it.
2. Pseudo-Classes
we apply pseudo-classes by using colon(:), we will see in examples.
Pseudo-Classes are further divided into 7 types
Hover
Focus
Active
Visited
First and Last Child selector
Nth child
Odd and Even Selector
2.A Hover
In Hover, when we move our cursor to the target element then it changes it property, we apply pseudo classes on target element by using colon(:) e.g.
<button> Press Me </button>
button:hover{
color:blue;
background-color: yellow;
border-radius: 5px;
}
As you can see, we select the button and apply hover class on it , button:hover and defined what property we want to change.
If you are reading this blog in PC then just click on the white codepen screen and move your cursor to the button you will see the changes in the property of button.
If you are reading this blog in mobile then just click on the codepen screen and click on button, you will see the changes in the property of button
2.B Focus
Focus is basically for input tag, when we start to write in input tag then we can changes it's property. e.g.
<label for="myname">Name</label>
<input type="text" name="myname">
input{
border: 2px solid black;
border-radius: 2px;
background-color: yellow;
}
input:focus{
background-color: lightgreen;
}
As we can see, bg color of input has been changed when I started writing.
2.C Active
we use active mostly on links, when we click on link then a link becomes actives and at that point of time we can change it's property.
We can use active selector for every element, it doesn't bound to links.
2.D Visited
It is used to change the property of all visited links.
<a href="https://www.hashnode.com" target="_blank">Hashnode</a>
a:visited{
color: green;
}
As we can see, property of visited links has been changed, not just color we can change any property we want.
2.E First and Last Child Selector
It is used to select first or last child of list.
li:first-child{
color: red;
}
li:last-child{
color: red;
}
2.F Nth Child Selector
It is used to select any nth no. of child. e.g.
li:nth-of-type(3){
color: blue;
}
li:nth-of-type(4), li:nth-of-type(5){
color: gold;
}
2.G Odd and Even Selector
It is used to select odd or even no. of elements.
li:nth-of-type(odd){
color: red;
}
li:nth-of-type(even){
color: brown;
}
3.Pseudo-Elements
We apply Pseudo-Elements by using double colon (::).
3. A First-Letter
As name suggests, it is used to change the property of first letter of our text.
p::first-letter{
font-size: 100px;
color: orchid;
}
3.B First-Line
It is used to change the property of first line of our Text.
p::first-line{
font-weight: 900;
}
3.C After
It is used to add any content after our element.
<h1>This is a Heading</h1>
h1::after {
content: ' Welcome to Hashnode';
color: blue;
}
3.D Before
It is used to add some content before any element.
h1::before{
content: ' Hashnode ';
}
Conclusion
As I believe, to be a good developer we should more focus on practicality, not on theory. so go and get your hands dirty on it, try all the code by yourself.
Thank you so much for reading it completely, If you liked it do like, comment, share and follow for more content. Comment for any feedback.