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 ❤