CSS: Pseudo-classes and pseudo-elements

1. A pseudo-class is a selector that selects elements in a specific state, like a class added to the HTML.

• :first-child targets the first element in the article.
  (p:first-child targets the first paragraph in the article.)

• :last-child represents the last element among its siblings.

• :only-child represents an element has no siblings.

user-action pseudo-classes

• :hover

• :focus usually represents an element(such as a form input) that has received clicks or Tabs.

  ---

2. A CSS pseudo-element is used to style specified parts of an element.

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

• ::before and ::after can insert content to the document in CSS. Used with content property.

• ::first-line
  

  ---

  example 1:

  Display div element on hovering over tag using CSS
  

    div {
        display: none;
    }

    a:hover + div {
        display: block;
        color: green;
        font-size: 25px;
    }