My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
11 CSS pseudo classes to make your CSS coding more efficient

11 CSS pseudo classes to make your CSS coding more efficient

Ida Hansen's photo
Ida Hansen
·Jul 2, 2016

There are about 40 psuedo classes and elements described in the MDN docs.

I realized that I hardly use a few of these, there are many psuedo classes that might be really useful but remain unused as they're not known that widely.

Here's a compiled list I've created on few interesting psuedo classes that would help enhance your CSS skills.


:target

Selects the current active element with its id when clicked on a URL containing that id as anchor.

Using :target you can apply styles(like animation) to an element when a link with its id as target has been clicked.

Interesting implementations: CSS only Modal, CSS Only interactive Calendar

more info: MDN docs

:checked

Finds out if a checkbox is checked or not.

Depending on the :checked class value, you can trigger some conditional CSS, thus eliminate writing something like .click() and addClass() in their javascript.

Example: Pure CSS Lightbox

more info: MDN docs

:fullscreen

Detects if the page is being viewed in full-screen mode or not and applies the fullscreen specific styles.

A page can be switched to view in fullscreen mode using Javascript Fullscreen API which provides a programmatic way to request fullscreen display from the user, and exit fullscreen when desired.

Demo: Fullscreen API Demo

more info: Fullscreen API, MDN docs

::backdrop

The ::backdrop pseudo-element is a box that the full screen element has behind it, but at the same time it sits above all other content.

Demo / info: CSS ::backdrop pseudo-element

:not

Taking a simple selector 'X' as an argument, :not matches an element that is not represented by that argument.

Example: Writing something like: p:not(.red) { color: black; } will select all the <p> tags that do not have a red class attached to them and apply a color: black; to them. which, in my openion is pretty cool.

more info: MDN docs

:nth-child()

Matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

You can use nth-child with pre defined arguments like nth-child(even), nth-child(odd)or create your own arguments like: nth-child(2n), nth-child(2n + 5)(5-item position) etc.

You can do some interesting things with :nth-child selector that you wouldn't normally think of, like Randomizing content with CSS and Inventing new selectors

more info: MDN docs

:root

Styles written under :root gets applied directly to the root of the document(i.e. the <html>).

Using :root can also be useful to declare global CSS Custom Properties(Native CSS variables and mixins)

demos: :root selector styling, Native CSS mixin with :root and @apply

more info: MDN docs

:matches / :any

matches is a CSS4 selector(currently known as :any) which lets you combine similar selectors into groups from which any of the included items can match to the specific element and the styles could be applies.

So you can write your selectors like :matches(div, footer) .highlight instead of writing div .highlight, footer .highlight

demo: :matches selector example

more info: MDN docs

:empty

Represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

With empty you can select an empty element and conditionally add content/styling to it when it has no content.

demo: :empty selector demo, adding content when element is empty

more info: MDN docs

:valid / :invalid

Identifies if the content in a element validates according to the input's type setting.

demo: CSS :valid / :invalid example

more info: MDN docs

:read-write

The :read-write pseudo-class targets the elements that can be edited by the user. It can work on elements that have the contenteditable HTML attribute as well.

Demo / info: :read-write demo


Conclusion

CSS psuedo classes can really enhance your CSS writing habits.

This was just a short list I put together for some interesting classes, there are a bunch of other ones too that can be really helpful!

Do share your favorites in the comments!