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
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 thepseudo-elements
. But it is a best practice to use two colons::
๐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. Whilepseudo-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-element
s 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.
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.