Getting Comfortable With CSS Selectors (Part 2) pseudo-classes and pseudo-elements in CSS

Hello everyone 👋‍, Welcome back to my series, Getting Comfortable With CSS Selectors,
if this is the first post in the series you are reading, I recommend checking out my previous article Getting Comfortable With CSS Selectors (Part 1) to follow up in the in series 😉.

in this article, we are going to continue from where we left off in the first part of the series, where we talked about some of the selectors we have in CSS. we will be looking at the Pseudo-Classes and Pseudo-Elements CSS selectors. sounds cool right? let's get into it 👇.

Pseudo-classes

CSS pseudo-classes are not exactly selectors on their own, they are keywords added to a CSS selector and let developers specify a special state of the selected element(s).

All Pseudo-class selectors in CSS are preceded by a colon :.

1. X:hover

/* Any button over which the user's pointer is hovering */
a:hover {
  color: pink;
  text-decoration: blue;
}

One of the most commonly used pseudo-class the :hover pseudo-class, which is used to style element(s) in the hover state (when the user hovers our them with a pointing device, usually a mouse).

so in the example, we would give every link a color of pink when it is been hovered on. Want to apply specific styling when a user hovers over an element? This will get the job done! 👍.

2. X:focus

 /* Selects any <input> with the field class when focused */ 
input.field:focus {
  border: 2px solid blue;
}

The :focus CSS pseudo-class represents an element (usually a form input) that has received focus (accepts keyboard or mouse events, or other forms of input).

in the codepen the :focus pseudo-class is used to give input with the red-class class a red background and a blue background to the input with the blue-class class whenever they are focused on.

3 X:nth-of-type(n)

/* Selects every second <p> element among any group of siblings */
div p:nth-of-type(2n) {
  color: lime;
}

The :nth-of-type() CSS pseudo-class selects elements(selectors) of a given type based on their position/location among a group of siblings.

say we have a ul and we want to style every li whose numeric position in the list is even, no need to give them a special class, we could do that with the :nth-of-type() pseudo-class selector!

What about those whose numeric position in the list is odd, we got it covered

4. X:first-of-type

The :first-of-type pseudo-class Same as :nth-of-type(1). Represents an element that is the first sibling of its type in the list of children of its parent element.
So if I wanted the first li to have a different style from its siblings, I could easily do that using the :first-of-type pseudo-class

5. X:visited

/* Selects any <a> that has been visited */
a:visited {
  color: purple;
}

In some websites, it's common to apply some special styles to links that the user has visited so that when they come back to the page, they can know the external links they have visited already.
This can be done with :visited CSS pseudo-class as its styles only apply to links that have been visited by the user.

Pseudo-elements

We've got another interesting group called pseudo-elements
CSS pseudo-elements are keywords added to a selector that lets you style a particular part of the selected element(s).

I know, i know, it seems similar to CSS pseudo-classes right 🤔. Well there are two main differences between them

1. pseudo-elements are preceded with two colons :: instead of one, although these days modern browsers are more forgiving and support both single : and double :: colons for the pseudo-elements. But it is a best practice to use two colons :: 😏

2. pseudo-classes are all about state, when we speak of state, I mean things like a visited link, a focused input field, an image that is being hovered upon, etc. While pseudo-elements are used to style sections or a particular part of of an element, things like the first letter in a word, the first line, etc.

6. X::first-letter (:first-letter)

The ::first-letter represents the first letter on the first line of a block-level element, as long it is not coming after an image or a table.

selector::first-letter {
  property: value;
}

as you can we use the ::first-letter pseudo-element to make the first letter of every <p> 300% and pink 😁.

7. X::selection (:selection)

selector::selection {
  property: value;
}

The ::selection pseudo-element is used to select and style the portion of a document that has been highlighted by the user. This is a really fun pseudo-element selector.

So if we wanted to overwrite the default styles of the browser that is applied text when they are selected/highlighted in our websites and apply our own custom styles, we can easily do that with the ::selection pseudo-element.

8. X::before (:before) And X::after (:after)

The ::before and ::after pseudo-elements are used to generate styleable content around the selected element's actual content, with the CSS content property.

we select the selector and after it, we give the content property a value, and whatever we specify in the value will be added before or after the selector in the Html.

`X::before (:before):` Represents a styleable child pseudo-element immediately before the originating element's actual content.

`X::after (:after):` Represents a styleable child pseudo-element immediately after the originating element's actual content.

By default the ::before and ::after pseudo-elements create an inline element, that can be styled and modified like any other element in the DOM. this gives us control to create cool interesting effects.

🚨 Note the ::before and ::after pseudo-element selectors should only be used to add cosmetic and stylistic content on our page. True content that is actually important for the page should be added to your page's markup.

Here is an example of using the ::before and ::after pseudo-elements i found on Codepen.

Conclusion

Alright coder This brings us to the end of the series, we've covered quite a bit about CSS selectors In this series! 🎉🎉🥂.

for a more comprehensive guide on CSS selectors check out some of these resources.

• MDN guide
• MDN Pseudo-classes
• MDN Pseudo-elements

And if you're up for it I have a Little Exercise On Codepen 😏 For you to test out your knowledge of what we have covered in this series. So I will like you to style the Html using the commented instructions in the CSS panel. Here is the Codepen Solution in case you get stuck 🙂.

So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends 💃💃.

Thanks so much for reading! ❤ And keep on coding! 👨‍💻.

Share and Like it with your friends and feel free to follow me on Twitter so you won't miss my latest articles again.