What are Pseudo-classes?

• A pseudo-class is used to define a special state of an element.

• For example, it can be used to:

• Style an element when a user mouses over it

• Style visited and unvisited links differently
• Style an element when it gets focus

:hover pseudo-class

• When you hover over the link in the example, it will change color

div:hover {
  color: blue;
}

:linkpseudo-class

• When link is unvisited then the link pseudo get's work or show some css.

a:link {
  color: red;
}

:visited pseudo-class

• When link is visited then the link show some change.

a:visited {
  color: pink;

}

:active pseudo-class

• When link is selected that the time :active pseudo-class done her work and show some changes.

a:active {
  color: yellow;
}

:focus pseudo-class

• Select and style an input field when it gets focus.

  input:focus {
  background-color: yellow;
  }
  

CSS in-child Pseudo-class

• The child pseudo-class matches a specified element that is the first child of another element.

• These child pseudo-class are as follow:-

  :first-child Selector

• The :first-child selector is used to select the specified selector.

• It is selected only if it is the first child of its parent.

p:first-child {
  background-color: yellow;
}

ul > :first-child {
  background: yellow;
}

:last-child Selector

• The :last-child selector matches every element that is the last child of its parent.
• Specify a background color for the

  element that is the last child of its parent:

  p:last-child {
  background: #ff0000;
  }
  

  :nth-child() selector:

• The :nth-child(n) selector matches every element that is the nth child of its parent.

• n can be a number, a keyword (odd or even), or a formula (like an + b).

  :nth-child(number) {
  css declarations;
  }
  

  :nth-child(odd)

• Done css on odd number elements.

p:nth-child(odd) {
  background: red;
}

:nth-child(even)

• Done css on even number elements.

p:nth-child(even) {
  background: lightgreen;
}

nth-child(3n+0)

• background color for all p elements whose index is a multiple of 3.

  p:nth-child(3n+0) {
  background: red;
  }
  

  nth-child(3n-1)

• a background color for all p elements whose index is a multiple of 3. Then we subtract 1 and will select the second, fifth, eight, etc.

p:nth-child(3n-1) {
  background: red;
}

:first-of-type

• Specify a background color for the first

  element of its parent.

p :first-of-type {
  background: #ff0000;
}

:last-of-type

• Specify a background color for the last

  element of its parent.

p :last-of-type {
  background: #ff0000;
}

:nth-of-type()

• The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent.

div:nth-of-type(2) {
  background: red;
}

Pseudo-Elements?

• it can be used to Style the first letter, or line, of an element.
• Insert content before, or after, the content of an element.

selector::pseudo-element {
  property: value;
}

::first-line

• The ::first-line pseudo-element is used to add a special style to the first line of a text.

p::first-line {
  color: pink
}

::first-letter

• The ::first-line pseudo-element is used to add a special style to the first letter of a text.

  p::first-letter {
  color: pink
  }
  

  ::before

• The::before pseudo-element can be used to insert some content before the content of an element.

h1::before {
  content: "Good Morning";
}

::after

• The::after pseudo-element can be used to insert some content before the content of an element.

h1::after {
  content: "Good Morning";
}