🤯CSS Pseudo Elements/Classes you have never heard of!

I was just scrolling through MDN's CSS reference and looking for a new thing to find for the CSS Quickies series.
So I was reading and scrolling and I found one funny Pseudo Class, then another and another and another.
So here we are! Me writing about pseudo-elements and -classes.

Pseudo Elements vs Pseudo Classes

Often people use these as they were the same and yeah CSS2/CSS3 are also to blame here because we have both ::before and :before.

So what is an Pseudo Element then?

A CSS pseudo-element is used to style specified parts of an element.
Some examples:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

The most known elements are ::before and ::after.

What is a Pseudo Class then?

A pseudo-class is used to define a special state of an element.
For example:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus The most known classes are :hover, :active, :focus and many more.

DISCLAIMER: Most of these are not yet or never will be supported by Internet Explorer and are maybe not yet supported by all modern browsers.

The ::backdrop pseudo-element

This is part of the Fullscreen API and will earn you some swag points if you want to be artistic.

When you enter the fullscreen mode in your browser. Most Browser will show a black background(backdrop) and videos if they have bars on the top and bottom are black. With the ::backdrop pseudo-element you can change that black backdrop to whatever color you like!

You can use this pseudo-element with the video or dialog HTML tag. Here is an example of how to make the borders pink!

video::backdrop {
    background-color: pink;
}

Amazing right?

The ::grammar-error and ::spelling-error pseudo-element

EYYYY, these are for me! Since people always complain about my spelling and grammar! Soon you will have your pseudo-elements! So you can have lengthy comments down below why you could not read that post and why it is so harmful! Please leave a comment don't below if you ever got a comment like that or wrote a comment like that! I love you both 😊

Okay back on topic 😋

The ::grammar-error pseudo-element represents a text segment that the user agent has flagged as grammatically incorrect.

Right now what you would see in your browser is a red underline when you would make a spelling or grammar error but with this pseudo-element, you can now change the look!

Example:

body::grammar-error {
  color: green;
}

I can not show you a real live example since no browser has implemented that yet and it is part of CSS Pseudo-Elements Level 4 specification.

Nevertheless a feature we are all were waiting for!

The :lang() pseudo-class

The :lang() pseudo-class matches elements based on the language they are determined to be in.

You need to pass a language code. They can be either 2 characters like de, lt, it and so on or they can be fr-ca which is Canadian french.

Example:
HTML

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

This will produce the following output:

Surprisingly this is supported by all major browsers even IE and Safari!

The :placeholder-shown pseudo-class

The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.

But what is the difference between :placeholder-shown and ::placeholder? Good question!

:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text. Here we can see why it is important to understand the difference between pseudo-class and pseudo-element!

Example:
HTML

<input placeholder="This is a very very very very long placeholder">

CSS

input:placeholder-shown {
  border: 5px solid red;
}

The outcome:

The :any-link pseudo-class

The :any-link CSS pseudo-class selector matches every <a>, <area>, or <link> element that has an href attribute. Thus, it matches all elements that match :link or :visited.

I wished I know about this before! it makes styling links so much easier!

Here is an example:

:any-link {
  text-decoration: none;
  color: green;
  font-weight: 600;
}

This will make every attribute that has a valid href bold and green!

And this is of course supported by every browser except IE. thanks, IE for nothing!

That's it for today!
Do you know more pseudo-elements or pseudo-classes that are interesting?

How much of these did you know?

Will you use some of them?

Comment down below!

I hope you liked that post! If you want a follow-up, please comment, like, and share. So I can know that you are interested in content like that!

👋Say Hello! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube