Pseudo Classes
A CSS pseudo classes is a special keyword used to specify a particular state of the selected element. For example, ":hover" can be used to change a button's color when the user's pointer hovers over it.
button:hover {
background-color: blue;
}
Some of the CSS Pseudo Classes
:active :
This is used when we want to change some CSS properties on click of the user on an element.
Syntax
:active
It is generally used with buttons and links.
Example
a:active { color: red; }
The above example will turn the link text color into red whenever pressed by the user.
:any-link :
This is used when we have to provide styling to all the tags containing "href" in it as a parameter. It will apply the given styling to all the tags containing "href" in them.
Syntax
:any-link
Example
a:any-link {
border: 1px solid blue;
color: orange;
}
The above example will give a border of color blue and text color of orange to every "a" tag containing "href" property.
:autofill
This class is used to style the input fields after the fields are auto-filled by the browser.
Syntax
:autofill
Example
input:autofill {
border: 3px solid blue;
}
The above example will change the border when the value is autofilled by the browser.
:checked
This class is used to style the radio, checkbox and option boxes, when they are checked or selected by the user.
Syntax
:checked
Example
/* Radio element, when checked */
input[type="radio"]:checked {
box-shadow: 0 0 0 5px blue;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 2px 0 0 5px yellow;
}
/* Option elements, when selected */
option:checked {
box-shadow: 0 0 0 2px orange;
color: pink;
}
The above example will change the style of the radio circle, checkbox box and option when selected by the user.
:default
This class is selects form elements that are the default in a group of related elements.
Syntax
:default
Example
input:default {
box-shadow: 0 0 2px 1px coral;
}
The above example will change the style of the input field which is selected as default.
:disabled
This class is used to style the disabled elements in a webpage.
Syntax
:disabled
Example
input[type="text"]:disabled {
background: #ccc;
}
The above example will give a background color to the input field if it's disabled.
:enabled
This class is used to style the enabled elements in a webpage.
Syntax
:enabled
Example
input[type="text"]:enabled{
background: #ccc;
}
The above example will give a background color to the input field if it's enabled.
:first-child
This class is used to style the first element among all sibling elements.
Syntax
:first-child
Example
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
The above example will style the first child of "p" tag in the webpage.
:last-child
This class is used to style the last element among all sibling elements.
Syntax
:last-child
Example
p:last-child {
color: lime;
background-color: grey;
padding: 10px;
}
The above example will style the last child of "p" tag in the webpage.
:nth-child()
This class is used to style the elements based on their position among a group of siblings.
Syntax
:nth-child()
Example
.span:nth-child(2) {
background-color: blue;
}
The above example will style the 2nd child present in the span tag. We can also give it a value of n. For example, 2n will mean, target only even elements.
:focus
This class is used to style the element on receiving focus which is either done by user tap or when user presses the tab key and moves around the webpage.
Syntax
:focus
Example
.red-input:focus {
background: yellow;
color: red;
}
The above example will change the background to yellow and color to red when the input field receives focus.
:hover
This class is used to style the element when the user hovers on the that particular element. It will be triggered when the user moves the mouse over the element.
Syntax
:hover
Example
a:hover {
background-color: gold;
}
The above example will change the background to gold when user hovers over a "a" tag in the webpage.
:visited
This class is used to style the link after it is visited once by the user.
Syntax
:visited
Example
a:visited {
background-color: yellow;
border-color: pink;
color: blue;
}
The above example will change the link background color to yellow, border-color to pink and text color to blue if the user has once visited the link.
Pseudo Elements
A CSS pseudo classes is a special keyword used to style a specific part of the selected element. For example, "::placeholder" can be used to style the placeholder part of the input fields.
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
Some of the CSS Pseudo Elements
::after :
This is used to create a last child of the selected element. It is inline in nature by default. It is generally used in the elements containing content.
Syntax
::after
Example
p::after {
content: "hello world";
color: blue;
}
The above example will add the text "hello world" after every paragraph element.
::before :
This is used to create a first child of the selected element. It is inline in nature by default. It is generally used in the elements containing content.
Syntax
::before
Example
p::before{
content: "hello world";
color: blue;
}
The above example will add the text "hello world" before every paragraph element.
::first-line :
This is used to style first line of block level elements such as paragraph.
Syntax
::first-line
Example
p::first-line {
color: blue;
text-transform: uppercase;
}
The above example will style the first line of the paragraph.
::first-letter :
This is used to style first letter of the first line of block level elements such as paragraph.
Syntax
::first-letter
Example
p::first-letter {
font-weight: bold;
color: white;
}
The above example will style the first letter of the first line of the paragraph.
These were some common pseudo classes and elements in CSS. Surely there are many more explore. You can explore more of them here (references for this article) :
Thank you for reading this article, I hope you have learnt something new and valuable. See you in the next article!