CSS selectors are used to find HTML elements & style them. CSS selectors are of five types.
- Simple Selectors
- Combinator selectors
- Pseudo-class selectors
- Pseudo-elements selectors
- Attribute selectors
Let us take look at them one by one.
Simple Selectors
Simple selectors are of three types. They are used to target HTML elements by tag name, class name or ID.
//Tag name Selector
p{
color: gray;
background: white;
}
//Class name Selector
.myclass{
color: gray;
background: white;
}
//ID Selector
#myid{
color: gray;
background: white;
}
//Universal Selector
*{
color: gray;
background: white;
}
//Selects every tag present in document.
As shown above here actual tag name, class & ID is used to target HTML elements for styling which is pretty much simple to understand.
Combination Selector
There are four types of combination selectors
- descendant selector ( )
- children selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
//descendant selector
div p {
color: gray;
}
//Selects all the p's which are inside div.
//children selector
div > p {
color: gray;
}
//Selects all the p's which are direct children of div.
//adjacent sibling selector
div + p {
color: gray;
}
//Selects first p which is immediately placed after div.
//general sibling selector
div ~ p {
color: gray;
}
//Selects all p's placed after div.
Note: Above examples are shown using tag selectors (e.g. div & p) but you will get same results if you use id or class names as selector.
Pseudo class Selector
Pseudo class selectors are used to select HTML elements when they are in a particular state. e.g. when cursor is hovered on element or when an element is focused.
syntax- selector:pseudo_class{ ... }
a:active {
color: gray;
}
//Selects active link
input:checked {
color: gray;
}
//Selects checked input element
input:enabled {
color: gray;
}
//Selects every enabled/disabled input based on pseudo class
p:empty {
color: gray;
}
//Selects every p's which has no child
p:first-child {
color: gray;
}
//Selects only that p's which are first-child of its parent
p:last-child {
color: gray;
}
//Selects only that p's which are last-child of its parent
p:only-child {
color: gray;
}
//Selects only that p's which are only child of its parent
p:nth-of-child(2){
color: gray;
}
//select p if it is 2nd child of its parent
p:nth-last-child(3){
color: gray;
}
//select p if it is 3rd last child of its parent
p:first-of-type {
color: gray;
}
//Select p's which is first of its type to its parent
p:last-of-type {
color: gray;
}
//Select p's which is last of its type to its parent
p:only-of-type {
color: gray;
}
//Select p's which is only of its type to its parent
p:nth-of-type(3){
color: gray;
}
//select p if it is 3rd of its type of child to its parent
p:nth-last-of-type(2){
color: gray;
}
//select p if it is 2nd last of its type of child to its parent
input:focus{
color: gray;
}
//selects input which is focused/clicked
input:hover{
color: gray;
}
//selects input on which mouse/cursor is hovered/ on it.
a:link{
color: gray;
}
//selects all unvisited anchors/links
a:visited{
color: gray;
}
//selects all visited anchors/links
input:optional{
color: gray;
}
//select input element with no required attribute
input:read-only{
color: gray;
}
//select input with read only attribute
input:required{
color: gray;
}
//select input with required attribute
input:invalid{
color: gray;
}
//select input with invalid value
Note: Above examples are shown using tag selectors (e.g. div & p) but you will get same results if you use id or class names as selector.
Pseudo element Selector
Pseudo elements are used to select specific part of HTML elements. (e.g to insert content before or after)
syntax- selector::pseudo_element{ ... }
p::after{
color: gray;
}
//insert content after p
p::before{
color: gray;
}
//insert content before p
p::first-letter{
color: gray;
}
//selects first letter of p
p::last-letter{
color: gray;
}
//selects last letter of p
p::first-letter{
color: gray;
}
//selects first letter of p
p::first-line{
color: gray;
}
//selects first line of p
p::selection{
color: gray;
}
//selects portion of p that is selected by user
End Notes: Hope you like the blog. If you have any suggestions please feel free to comment. Happy Coding! Good Day!