CSS Pseudo-Classes Guide

:hover

button:hover {
  background-color: #3498db;
  color: white;
}

input:focus {
  border: 2px solid #e67e22;
}

button:active {
  background-color: #c0392b;
  color: white;
}

Visited link

a:visited {
  color: purple;
}

li:nth-child(2) {
  color: blue;
}

Paragraph 1

Paragraph 2 (styled)

p:nth-of-type(2) {
  color: green;
}

I'm the first child

Second paragraph

p:first-child {
  background-color: #dff0d8;
}

First paragraph

I'm the last child

p:last-child {
  background-color: #f9e79f;
}

I'm the only child

div:only-child {
  color: red;
  font-weight: bold;
}

I am checked

input:checked + label {
  color: green;
  font-weight: bold;
}

input:disabled {
  background-color: #eee;
  color: gray;
}

input:enabled {
  border: 2px solid green;
}

This will be gray

This will be excluded

p:not(.special) {
  color: gray;
}

li:nth-last-child(2) {
  color: orange;
}

Span 1 Span 2 Span 3 (last-of-type)

span:nth-last-of-type(1) {
  color: blueviolet;
}