CSS: Pseudo Classes

#BuildTogether, Day 28/100

Today was another good day, =D I am a fan of Food Markets and today afternoon I visited one and had noodles, momos, and a coffee ;) The evening got spent meeting a friend and chilling out...

I switched to CSS today as I am still not able to figure out the last missing puzzle piece in the BookLog App. Hopefully, some guidance from a Senior developer will help me figure it out.

I did CSS selectors on the 6th day, a little delay in doing pseudo-classes :P. Every Selector can have a pseudo-class attached to it.

Pseudo-classes on the selectors allow to work with the page in a dynamic mode, for example, respond to user’s actions. Pseudo-classes can respond to the dynamic state of the page elements, for example, element changing color when you hover over it or coloring a visited link differently.

There are two types of pseudo-classes: those that determine the state of elements, and those related to the document tree

Determining the state of the elements

Pseudo-classes respond to the current state of the selector. Pseudo-classes cannot exist separately and must be attached to the selector whose state they describe.

Syntax:

css-selector:pseudo-class {
property: value;
}

pseudo-class :active reflects activation of a page element. Activation is the time between the user pressing and releasing the mouse button. The link is considered active after it has been clicked on, for example:

a:active {
color: blue;
}

pseudo-class :focus works when an element gets a focus. It usually happens to the input element of the form when one clicks on the form:

input:focus {
color: grey;
}

pseudo-class :hover makes the element react when the mouse pointer is hovering over it:

a:hover {
color: red;
}

pseudo-class is :visited reacts when the element has been visited. Mostly used for hyper-links to show the historical state of elements.

a:visited {
color: purple;
}

Working with a DOM Tree

Pseudo-classes that allow working with the DOM tree target the hierarchy of an HTML document. They work with elements depending on their order in the HTML code structure.

For example:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>

An unordered list with 10 elements and first-child and last-child are properties that will respectively output first and the tenth item.

li:first-child {
background: green;
}
li:last-child {
background: red;
}

The nth element can also be selected using:

li:nth-child(2) { 
background: yellow;
}

The even and odd selection can be done in the following way:

li:nth-child(odd) {
color: blue;
}

li:nth-child(even) {
color: orange;
}

If there is a need to point to every nth element, it is done in the following way:

li:nth-child(3n) {
border-style: solid;
}

Codepen: pseudo-classes

I created a code-pen to experiment with pseudo-classes

The full list of pseudo-classes can be found in MDN docs.

PS: If you are interested to read “My Journey of 100 Days”, please feel free to hop onto MongoDB Community Forums ❤

--

--

--

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to build a floating label input field

Opening Day for Postgres Vision 2017

Rest API

Grant Types in OAuth2.0

Safely unpacking JSON objects in Dart

Top 5 Web Development Trends for 2021

Post Covid-19 Update: Continuous Integration Tools Market To Reach USD 1.8

MechVerse:Origin — Game Dev Log — Week 10

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Henna Singh

Henna Singh

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

More from Medium

Understanding CSS Flexbox — Jerry’s Tech Note

CSS Layouts & floats

The magic explained — HTML, CSS, JavaScript

Electric light bulb reacting to a hand

How To Create A Simple Carousel using CSS

An image of carousel