Introduction to Pseudo-Class Selectors

What we will cover in this article more specifically is the subject of pseudo-classes! First of all, what pseudo-classes are, you may ask. They are keyword in CSS language that lets you interact with external factors or events, like moving the mouse over an element or visiting a link. We will not cover here all the pseudo-classes but after reading this article you will get the idea! The main idea behind this pseudo-classes is that they expose events in CSS language witch means that is easier to interact with HTML element on web pages.

Let`s start with some examples!

:active

p:active { 
  background-color: red; 
} 

Explanation: When the element is clicked the background is changing to red.

::after

You can insert some content in the html after the element. Is better to see an example to understand.

Example:

p::after { 
  content: "insert here"; 
  color: red; 
}

::before

This class is acting like ::after but on the other way, is inserting content before the element.

Example:

p::before { 
  content: "insert here"; 
  color: red; 
}

::first-line

Select the first line of a text on witch you can apply your properties.

Example:

p::first-line { 
  color: red; 
}

::first-letter

Select the first letter of a text.

Example:

p::first-letter { 
  color: red; 
  font-size: 2rem; 
}

:first-child

This one is very interesting because is selecting the first element of his parent.

Example:

.class :first-child {
  color:red;
}

Much more interesting is that you can be more specific and select the first child of a certain type. Example:

.class p:first-child {
  color:red;
}

Which will select the first element of type <p> in the .class

You already got the idea from now. For more pseudo-classes refer to this page.

Useful links

If you want to learn and get a job I will refer to the Microverse page. Here you will get all the help and tools to start learning and become a Full Stack Developer.

For this article, I inspired myself from www.w3schools.com.

You can find me on Twitter | Github | Linkedin