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! This pseudo-class is acting as the event and is used on every element. :active Click Example: { : red; } p :active background-color When the element is clicked the background is changing to red. Explanation: ::after You can insert some content in the html after the element. Is better to see an example to understand. Example: { : ; : red; } p ::after content "insert here" color ::before This class is acting like ::after but on the other way, is inserting content before the element. Example: { : ; : red; } p ::before content "insert here" color ::first-line Select the first line of a text on witch you can apply your properties. Example: { : red; } p ::first-line color ::first-letter Select the first letter of a text. Example: { : red; : ; } p ::first-letter color font-size 2rem :first-child This one is very interesting because is selecting the first element of his parent. Example: { :red; } .class :first-child color Much more interesting is that you can be more specific and select the first child of a certain type. Example: { :red; } .class p :first-child color 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 page. Here you will get all the help and tools to start learning and become a Full Stack Developer. Microverse For this article, I inspired myself from . www.w3schools.com You can find me on | | Twitter Github Linkedin
