In this tutorial lets learn and master Simple CSS selectors.
What is a CSS selector?
In CSS, Selectors are used to select the HTML elements like
div, h1, span and style them with CSS properties.
For example, If you want to style all the div elements, we can use,
div {
color:red;
}
Types of CSS Selectors:
- Simple CSS selectors.
- Pseudo-class selectors.
- Attribute selectors.
- Pseudo-element selectors.
- CSS Combinator selectors.
Lets discuss about Simple CSS selectors in this article.
Simple CSS Selectors:
These selectors are the most used CSS selectors which help in styling the HTML tags like div, span, h1 tags and its elements which have classes and ids.
The basic thing for a CSS beginner is to understand that, if you want to style CSS elements, understanding Simple CSS selectors is a must.
An example for all the Simple CSS selectors with the following HTML and CSS code.
<h1> Header </h1>
<div> Div element </div>
<span class="span-class"> Span element </span>
<input type="text" id ="input-text"></input>
Here we change the color of h1 tag to red.
h1{
color:red;
}
Here we change background-color of all div elements.
div{
background-color:red;
}
Here we change the font-size of the span having class of span-class
.span-class{
font-size:30px;
}
Here we change the padding of the input tag with id of input-text.
#input-text {
padding:20px;
}
We can also group them with commas, so that all the selectors specified have same CSS properties specified there.
Here h1, h2, h3 and div elements will have color of pink.
h1, h2, h3, div {
color:pink;
}
Another important selector is the universal selector (*).
This universal selector selects each and every HTML tag in the html file and applies the CSS properties applied in it .
Example, In our Universal Selector Article we used the following CSS code, which will be applied to all HTML elements.
*,*:before, *:after {
box-sizing: border-box ;
padding: 0 ;
margin: 0 ;
}
:before , :after are pseudo selectors.
Very important fact every beginner must know,
Class names can be applied to many html elements but ids have to be unique.
By reading this article you know more than 70% of all CSS selectors that is being used by developers in their CSS projects.
The remaining 30% consists of,
- Pseudo-class selectors like
button:hover - Attribute selectors like
input[type="submit"] - CSS combinator selectors like
div > p - Pseudo-element selectors like
:before, :after
All the remaining 30% Selectors will be discussed in my upcoming articles and will be linked below.
My Personal Experience:
When I started learning CSS as a beginner, I really fumbled with CSS selectors and did not even know they were called as selectors for a week eventhough I saw a lot of tutorials on Youtube.
Then I started to play with classes and ids and worked around that for a month trying to learn other CSS properties like grid and flexbox.
Eventually after learning them, I again hoped on to CSS selectors and was astonished to see there are lot more to selectors than I thought. But after mastering simple selectors, it was very easy to understand the other types of selectors.
So, for beginners I can say, play around with Simple CSS selectors discussed in this article until you get a firm grasp over it. Along with them learn other CSS properties like grid, flexbox , borders, media queries , box-shadows etc..
The main part here is to be comfortable with classes. If you are comfortable with classes you can start to learn other CSS selectors.
Thank you for reading!
If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.
Discussion (2)
While it is true in your example,
span-classselector will be valid for all elements not onlyspan.Good statement Adam. Yes we can use .span-class anywhere. Thank you for your valuable comment.