Simple CSS Selectors are those selectors which select HTML Elements based on their name, id or class, irrespective of their state or relationship with other elements.
The main types of Simple CSS Selectors are given below.
Table of Contents
Universal Selector
Universal Selector ( * ) is a very powerful type of selector, as the name suggest universal selector is used to select all types of elements inside the web page. Look at the example below.
* {
padding:0;
margin:0;
color:#red;
}
All three lines of code written inside the curly brackets will apply to all the elements of our html page or web page.
Element Selector
The Element Selector is the name of the element. It selects or targets all the elements with the same name.
p {
font-size:20px;
font-weight:bold;
color:#red;
}
All the paragraph tag elements would have font-size of 20px, style bold and color red.
Id Selector
The Id Selector uses the unique Id of element to select it or target it. The id is defined using Id attribute within the opening tag of element.
<div id='main'>
</div>
To Select an element with particular Id, we use the pound sign or hash tag (#) with the name of Id. The Id of each element on HTML page should be unique.
#main {
padding:20px;
background-color:red;
}
These set of rules will apply to all the elements with Id "main".
Class Selector
Class Selector uses the class of HTML element. The class is defined using class attribute within the opening tag of element.
<div class='main'>
</div>
To Select an element with particular Class, use the dot (.) with the name of class. The Class of element may or may not be unique.
.main {
padding:20px;
background-color:red;
}
These set of rules will apply to all the elements with class "main". But you can also specify if you want only one type of element to be affected by this class or not. For that, simply write the type of element before the class selector.
p.main {
padding:20px;
background-color:red;
}
With this, only paragraph type elements with the class "main" will have this styling rules.