Pseudo Classes & Elements

I. What are Pseudo-classes?

They are keywords that we can use in CSS to target elements in a particular state.

For example:

  • :hover - when we hover over an element
  • :focus - when a field is in focus
  • :first-child - when an element is the first child of a parent element

We use pseudo-classes by adding them to the end of our selector.


selector:pseudo-class {
  property: value;

II.Pseudo-classes examples

We can display links in different ways:

/* unvisited link */
a:link {
  color: red;

/* visited link */
a:visited {
  color: gray;

/* mouse over link */
a:hover {
  color: yellow;
  text-decoration: underline;

/* selected link */
a:active {
  color: blue;

2. :focus Pseudo-class

With :focus Pseudo-class, we can style an element when it’s focused.

For example, we change the border of input when it’s focused.

form input:focus {
  border: 4px dashed gray;

3. :valid Pseudo-class

We can also change the style of input when it’s valid.

For example, when a user types in a valid email, the border’s color changes to blue.

form input:valid {
  border: 4px solid blue;

4. :first-child Pseudo-class

The :first-child Pseudo-class can target the child of a parent element when it’s the first child inside the parent element.

ul li:first-child {
  border: 2px solid red;

III. What are Pseudo-elements?

Pseudo Elements allow us to inject dynamic content or style the content inside an element.


The syntax of pseudo-elements:

selector::pseudo-element {
  property: value;

List of Pseudo Elements:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

1. ::first-letter pseudo-element

The ::first-letter can add style to the first letter of a text.

p::first-letter {
  color: red;
  font-size: 30px;

2. ::first-line pseudo-element

::first-line adds a special style to the first line of a paragraph.

p::first-line {
  font-weight: bold;
  font-size: 1.2em;

3. ::before pseudo-element

::before pseudo-element can insert some content before the content of an element.

p::before {
  content: url(smiley.gif);

4. ::after pseudo-element

::after can insert content after the content of an element.

p::after {
  content: "...";

5. ::selection pseudo-element

We can change the style of something when it’s selected with ::selection

p::selection {
  background-color: red;
  color: white;