Learning CSS with Less - Pseudo-selectors and pseudo-classes
Learning CSS with Less - Pseudo-selectors and pseudo-classes
We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog.
Now lets discover the next part of the course together! Enjoy!
- Topics of discussion
- CSS pseudo-selectors and pseudo-classes
1. Topics of discussion
In this tutorial, we are going to discuss pseudo-selectors and classes that can be used in CSS. So, let's have some fun.
2. CSS pseudo-selectors and pseudo-classes
Pseudo selectors in CSS are used to style different states of an element or certain elements of a given type without impacting the rest of the elements' style. They are used alongside a regular selector and you can identify a pseudo selector by the presence of the : or :: signs.
In this tutorial, I am going to go through the most common pseudo-selectors and I will leave a link for you to check out, even more, should you desire to do so.
Let's start off with some button and link related pseudo-selectors:
- :active - e.g. a:active; a pseudo-selector used to select active links; a link is in an active state when you are clicking on it basically
- :visited - e.g. a:visited; a pseudo-selector used to select visited links; a link becomes visited after you have clicked on it
- :hover - e.g. .btn:hover; a pseudo-selector used to style the hover state of an element; the hover state occurs when your cursor is hovering an element without actually clicking on it
- :focus - e.g. .btn:focus; a pseudo-selector that selects the focus state of an element; the focus state occurs on a button after it has been clicked and before you click on another element; it also occurs on text boxes and inputs when you are typing in them
These pseudo selectors come in very handy when you want to style certain states of an element if the defaults are not to your liking. Let's move on to number based pseudo-selectors:
- :first-child - e.g. div:first-child; a pseudo selector used to select the first child of a given element; very useful for enumeration style elements such as lists or any div that contains multiple children of the same generic type (think of shopping websites that display products either horizontally or vertically)
- :last-child - e.g. div:last-child - similar to the one above, only this time it targets the last child of the given element
- :nth-child(expression) - e.g. div:nth-child(2n) or div:nth-child(odd); a pseudo-selector used to select certain children based on expressions or keywords such as the ones shown here; you can use plain numbers as well in order to select a certain child element
- :nth-of-type(expression) - e.g. div p:nth-of-type(3n-1); a pseudo-selector somewhat similar to the previous, only this time it targets elements of a certain type rather than all children; it can be used with plain numbers as well
- :first-of-type - e.g. .product-item:first-of-type; a very useful pseudo-selector used to target the first appearance of an element; specificity is important, so if you have to use this rule in multiple places, make sure to specify it accordingly, otherwise the rules will get applied only to the first appearance of the item; for example, if the product-item class is used on elements located inside another element that uses the product-list class, then rewrite the rule as .product-list .product-item:first-of-type to make sure it gets applied everywhere you need to
- :last-of-type - e.g. .product-item:last-of-type - similar to the one above, but targets the last appearance of the CSS selector
Finally, let's go through some content, text, and relational pseudo-selectors:
- ::before - e.g. .list-item::before; used to add content before the already existing content in elements that use the list-item class
- ::after- e.g. .list-item::after; used to add content after the already existing content in elements that use the list-item class
- :not(selector) - e.g. div:not(.navigation); a pseudo-selector used to target all elements except those that satisfy the selector condition; in our case, it would select all divs that do not have the navigation class on them
- ::first-letter - e.g. p::first-letter; a pseudo-selector used to target the first letter of the content inside an element
- ::first-line - e.g. p::first-line; a pseudo-selector used to select the first line of text inside an element
These are the most common pseudo-selectors you will use. If you want some further reading, take a look here.
And that about covers it for this tutorial. In the next one, we are going to talk about centering content inside an element. See you then.