AshKey's Logo
ServicesAbout Us

AshKeys

Confessions and Confusions of a Freelance Fullstacker.

Ashok Mannolu Arunachalam, • How toCSSPseudo classes
Back

CSS pseudo elements and how to use them

Most of you know about ::before and ::after CSS peudo elements from the create your own custom checkbox post or from the usecases for ::first-child and ::last-child post. Let's take a look at some other interesting peudo classes.

::selection

Applies styles to user selected text of an element like the paragraph below. Try selecting it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

css


::selection {
  background-color: yellowgreen;
  color: blue;
}

::placeholder

We see the custom placeholder styles for all input elements.

css


::placeholder {
  padding: 0 5px;
  color: blue;
  opacity: 0.6;
  font-family: monospace;
}

::backdrop

Backdrop is used to style the elements full screen box. Here in this example it is a dialog.

This is the dialog

css


::backdrop {
  background-image: url('https://source.unsplash.com/random');
  opacity: 0.7;
}