por CSS classes allow us to identify elements in a general way to later modify their styles. However, in the process of designing a website, sometimes we need to be more specific with what we want to stylize. Therefore, in this post, We present pseudoclasses and pseudoelements in CSS, which will allow you to identify specific states and points within your HTML elements.
Pseudoclasses in CSS
CSS pseudoclasses are keywords that we can add to selectors to identify a state in our HTML elements. This means that We can insert them when we want to stylize an element that is in a specific state. What CSS pseudoclasses allow us to do is identify elements not only according to the code tree, as CSS basic selectors and multiple selectors do, but also according to factors such as browser history and mouse movement.
If you have questions about what types of selectors exist, we invite you to read our posts on basic selectors and multiple selectors in CSS.
Below we present some of the CSS pseudo-classes and the states they select when inserted into a selector.
:link: This pseudo class selects a link.
:visited– Select a link that has been visited.
:active– Select a link that is active.
:focus– Select a link that has focus.
:checked: This pseudoclass of CSS classes can be useful in forms, as it allows us to give a different style when an element is selected in the list.
:hover: Select an element that has the mouse over it.
:target– This pseudo class selects an element based on the hashtag which is in the URL.
:lang()– This pseudo class selects based on a language.
:nth-child (n): Select a specific number of a child. For example, we can select an element that is the tenth child of its parent element.
:first-child– Selects the first child of a parent element.
:last-child– Selects the last child of a parent element.
:only-child– Selects the only child of a parent element.
:nth-of-type (n): select a specific number among elements of the same type.
:first-of-type: selects the first element of a type.
:last-of-type: selects the last element of a type from CSS classes.
:only-of-type: selects the only element of a type.
:not(): This pseudoclass allows us to apply styles just when the opposite is true. For example, we could use it when we want to apply a style to a link when it is not active.
There are many more pseudoclasses in CSS. If you want to know each of them in depth, we recommend visiting the post about pseudoclasses on the official page of the Mozilla Developer Network.
Pseudoelements in CSS
Like pseudoclasses in CSS, pseudoelements in CSS allow us to be more specific when selecting what we are going to apply a style to. Unlike pseudo classes, CSS pseudo-elements do not identify a state, but rather identify specific points or places within an HTML element. Next, we present the most important CSS pseudo-elements:
::first-letter: This pseudo-element allows us to access the first line of an HTML element. For example, the first line of a paragraph.
::first-line: This pseudo-element allows us to access the first letter of an HTML element.
::before {content=»»}– This pseudo-element allows access to the space just before the opening of an HTML element. In the case of a paragraph, it will allow us to access the space just before the
tag.
::after {content=»»}– This pseudo-element allows us to access the space just after the HTML element closes.
How to use pseudo elements in CSS ::after and ::before?
The pseudo-elements in CSS ::after and ::before allow us to access a part of the element that does not exist by default. Therefore, they require that we insert the
Like the other pseudo-elements, when inserted inside a selector we can add styles to them. However, the ::after and ::before pseudo-elements are special because, In order for us to see the effects of these styles, we must first give it position and size characteristics. Without these features, they are just an empty element online.
So what are these pseudo-elements in CSS for? They allow us to create icons and stripes just before or after elements. We can use this space to paint letters as an icon just before or after titles, paragraphs and all kinds of elements. We can also create stripes that divide our space to highlight an image or multimedia element.
To learn more about the topic, you can read the post on CSS pseudoelements from the Mozilla Developer Network.
What is the next step?
After reading this post you already know what pseudoclasses and pseudoelements are and how they work in CSS. Now that you know how to use them to identify specific states and points within your HTML elements, it’s time to put them into practice on your own website! For this reason, we recommend the Full Stack Web Development Bootcamp, an intensive bootcamp. There, among many other things, you will continue learning about CSS and HTML. In the end, you will use all the knowledge acquired to create your own responsive website for mobile devices and computers. Don’t miss the opportunity to continue learning and sign up now!