Practical Way of Using Pseudo Selector in CSS

There are a lot of pseudo selectors in CSS & remembering all of them is not possible, but we are going to talk about the most commonly used selectors and most here.

⚒Designing Links and Buttons using LVHA Rule

• LVHA refers to Link, Visited, Hover, and Active pseudo-classes.
• When we want to design a link or button just select pseudo-classes in LVHA order.
• This LVHA order is important because if we use the :link after :hover, the :link will override all the properties of hover because they are equally specific.

.btn--full:link,
.btn--full:visited {
  background-color: #e67e22;
  color: #fff;
}

.btn--full:hover,
.btn--full:active {
  background-color: #cf711f;
}

🔦 :link
The :link selector is a pseudo-class that targets all anchor <a> elements on a page that have an href attribute.

🔦 :visited
The :visited pseudo-class selector can change some of the styling on an anchor link <a> element if the user’s browser has already visited the link.
It’s meant to help users distinguish the difference between links they have and haven’t visited.

🔦 :hover
The :hover pseudo-class in CSS selects elements when the mouse cursor is currently over them. It’s commonly associated with link <a> elements.

🔦 :active
The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated).
It’s usually only seen for a split second and provides visual feedback that the element was indeed clicked.

⚒Position and Number-based pseudo-class selectors

Below Are Position and Number-based pseudo selectors

Reference

https://css-tricks.com/pseudo-class-selectors/