Pseudo-classes CSS


Pseudo-classes are widely used to make our webpage interactive like applying styles on hover of a button (:hover) and changing the styles if a checkbox is checked (:checked) etc.,
a pseudo-class is denoted by a colon(:) followed by the pseudo-class name.
Eg., :hover, :checked
element:pseudo-class{
property: value
}
let's go through some frequently used pseudo-classes
:hover
it matches when the user hovers over a specified element.
button:hover{
background-color: #fff;
}
:active
Matches when the user activates any element i.e., When the user presses the primary mouse button.
button:active{
background-color: #fff;
}
:focus
Matches when the input element has focus on it.
button:focus{
background-color: #fff;
}
Please refer to documentation to learn more pseudo-classes. Will see all the above classes in an example below.
:first-child
it selects the first direct sibling of the specified element.
:last-child
it selects the last direct sibling of the specified element.
:nth-child(n)
similar to :first-child and :last-child, it selects the nth sibling of the specified element.
- if n is odd ==> it will selects all odd elements.
- if n is even ==> it will select all the even elements.
- if 3n ==> it will select every 3rd element.
- if An + B ==> Select the list indices which match the pattern.
Some of the examples for An + B
- :nth-child(n+7) ==> 7(0 + 7), 8(1 + 7), 9(2 + 7) etc.,
- :nth-child(2n+1) ==> 1 (20 + 1), 3(21 + 1), 5(2*2 + 1) etc.,
- :nth-child(-n+2) ==> 2(-0 + 2), 1(-1 + 2), 0(-2 + 2)
:only-child
Selects the element if it is the only child of the parent element.
:first-of-type
li:first-of-type{
color: red
}
This will select the first li type element inside the parent even though there are some other elements before li.
:last-of-type
li:last-of-type{
color: red
}
This will select the last li type element inside the parent even though there are some other elements after li.
:nth-of-type
li:nth-of-type{
color: red
}
This will select the nth li type element inside the parent even though there are some other elements before/after li.
:only-of-type
span:only-of-type{
color: red
}
This will select the span if there is only one span element present inside the parent.
Thanks for reading this article🙏🙏🙏
Subscribe to my newsletter
Read articles from saiprasad padhy directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

saiprasad padhy
saiprasad padhy
When I first started out in my career, I was all about becoming a Data Scientist or ML Engineer. I was super good at Python and SQL, so that’s what I focused on. But then, I realized that I was actually more interested in being a Data Engineer. I love being highly analytical and process-oriented, and I’m really good at using the Microsoft Azure Data Engineering stack. I’m fluent in Python, SQL, and Databricks, and I’m especially good at Big Data tech like Hadoop and Spark (PySpark). I also know a lot about SQL databases (MS SQL, Postgres, Cosmos DB, and Mongo DB), data orchestration with Azure Data Factory, data governance with Microsoft Purview and Unity Catelog, and advanced tools like Azure Synapse Analytics, Delta Lake. I’m really passionate about finding the right solutions to complex challenges, and I’m not afraid to use any technology I need to get the job done. I’m also well-versed in AI technologies like Azure AI Services, Azure Open AI Studio, Scikit-Learn, and Spark ML. I’d love to chat with you and see how my skills can help you with your data engineering needs!