8 Unfamiliar CSS Pseudo-Classes

'A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).' - MDN Web Docs

Wait....what? That sounds complicated right?

What if I told you, you might be surprised to know you are already using them?

Of course you are! Here's an example of the syntax used, can you think of any pseudo classes you have used before?

selector:pseudo-class {
  property: value;
}

Let me guess, you thought of :hover, maybe even ::before and :after? If so, great job! However, there are many others we can use to improve our sites. Lets check out 8 unfamiliar ones below:

:checked

Selects inputs, radio or options in select tags that have been toggled "on" by a user clicking on them.

/* Any checked element */
:checked {
    color:blue;
}

/* input checkbox example */
input[type="checkbox"]:checked{
    color:red;
    border:none;
}

:empty

Selects any element that is 'empty'.

An element is empty if it has no whitespace, visible content or child elements.

/* style an empty element */
:empty {
    border:1px solid red;
    background:white;
}

:root

Selects the element that represents the root of the document.

:root is identical to using html as a selector, except is has a higher specificity.

/* style the root element */
:root {
    padding:20px;
    background:black;
}

:visited

Selects any link that has already been visited on the page.

It will only select anchor tags that have a href attribute.

/* style a link thats been visited */
a:visited {
    color:red;
    font-weight: bold;
}

:in-range

Used to style elements that have range limitations such as inputs with min and max values.

The style is applied whilst its value is within the range limit.

/* style in-range */
input[type="number"]:in-range{
    background-color:green;
}

:only-child

Selects an element if it is its parents only child.

It can be chained with :hover and ::after.

/*  style only-child */
li:only-child{
    font-weight: bold;
}

/* chained example */
a:only-child:after{
    content: "(Only child)";
    color:red;
}

:required

Selects form elements that have the required attribute set.

s, s and s are valid selections.

/*  style required input */
input[type="email"]:required{
    border:2px solid red;
}

::selection

Selects the area of the document that is highlighted by the user.

Color, background-color and text-shadow are the only CSS properties that can be used.

/* all selectable elements */
::selection{
    color:white;
    background-color:blue;
}

/* specific element */
h4::selection{
    color:red;
    background-color: white;
}

The basis of this post stems from the popularity of the tweet linked below. If you found it useful or learnt something new please follow me on twitter where I post daily tips on HTML, CSS and JavaScript.

Liquid error: internal

Comments

[Gnio]

Amazing. Thank you so much!

[Frontend Dude 👨‍💻]

Thanks so much for supporting my article

[Luis Augusto]

Nice! :invalid is also a great one for styling form items that aren't filled out correctly, like email inputs.

[Frontend Dude 👨‍💻]

Thanks and great input. (pun intended XD)

Will definately be using :invalid in the future. Thanks

[pris stratton]

This is very cool. I feel like CSS is still a big mystery to me despite first coming across it in 2001, I’ve never sat down and properly learned it and some of the stuff you can do without JS is pretty amazing.

[Frontend Dude 👨‍💻]

It's a lot deeper than most people think. The possiblities are almost endless seeing as its a cornerstone technology of the World Wide Web.