What are pseudo-classes in CSS?

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#what-are-pseudo-classes-in-css

In CSS we use a few selectors like elements, classes or ids, that most people know, but not all of us know about one, very useful selector.

The pseudo-class selector.

But don’t worry, I’ll explain to you what’s that, and I’ll show you a few of the most popular ones. I will tell you what they do and when to use them.

Pseudo-classes are keywords/selectors that we use to select elements when they are in a special state.

The pseudo-class looks like “:keyword” and is used to add some life into your styles.

For example, your elements can change when you put the mouse over them, or select some input.

Now, let’s take a look on the list of most popular pseudo classes:

:active - This selector is used to select give a possibility to style the active link.

:first-child - We use this selector to select the first element in the DOM parent, for example, the first menu item.

:hover - We use this selector to select and style the element where we put the mouse over on.

:last-child - This selector is the same as the first-child one, just this one selects the last element.

:nth-child(n) - We use this selector to select every “n” child. It can be useful, for example, in lists or tables, where we want to give another color every n row.

:visited - This one selector can take the visited link. It can be useful when we want to give other styles to the links that we already clicked in.

:required - This one selector can give us the possibility to style inputs marked as “required”.

:focus - This one selector gives us the possibility to style inputs that we are currently focused on.

:checked - We use this selector to select the checked checkboxes.

:disabled - This one selector is useful to give different styles for disabled inputs.

:not(selector) - This selector is very useful in the case when we would like to add styling to all the elements that are not a specified element, like, for example, all elements, but not div.

a:active { color: #666; } /** Selects active link **/

a:first-child { color: #666; } /** Selects first element **/

a:hover { color: #666; } /** Selects element where mouse is over **/

a:last-child { color: #666; } /** Selects last element **/

a:nth-child(2) { color: #666; } /** Selects every second element **/

a:visited { color: #666; } /** Selects visited link **/

input:required { color: #666; } /** Selects required inputs **/

input:focus { color: #666; } /** Selects focused inputs **/

input:checked { color: #666; } /** Selects checked inputs **/

input:disabled { color: #666; } /** Selects disabled inputs **/

:not(p) { color: #666; } /** Selects every element that is not p **/

Thank you for reading,
Radek from Duomly