🤯CSS Pseudo Elements/Classes you have never heard of!
Tags: css, beginners, webdev, html
Published: 2020-03-29 14:28:04

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!
```css
video::backdrop {
    background-color: pink;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zu6etn5fbnnnzndk0meo.png)

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:
```css
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
```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
```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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r1889r98hy1nntshmbig.png)

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 <input> or <textarea> 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
```html
<input placeholder="This is a very very very very long placeholder">
```

CSS
```css
input:placeholder-shown {
  border: 5px solid red;
}
```
The outcome:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aty2pm4q5pkrg6wihs1z.png)

### 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:
```css
: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](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)