DEV Community

Cover image for 8 Unfamiliar CSS Pseudo-Classes
Frontend Dude πŸ‘¨β€πŸ’»
Frontend Dude πŸ‘¨β€πŸ’»

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

::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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (6)

Collapse
pris_stratton profile image
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.

Collapse
frontenddude profile image
Frontend Dude πŸ‘¨β€πŸ’» Author

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.

Collapse
luisaugusto profile image
Luis Augusto

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

Collapse
frontenddude profile image
Frontend Dude πŸ‘¨β€πŸ’» Author

Thanks and great input. (pun intended XD)

Will definately be using :invalid in the future. Thanks

Collapse
gnio profile image
Gnio

Amazing. Thank you so much!

Collapse
frontenddude profile image
Frontend Dude πŸ‘¨β€πŸ’» Author

Thanks so much for supporting my article