css pseudo classes code example

Example 1: pseudo class

Pseudo class

Example 2: pseudo class css

.element:nth-child(1)
.element:hover
.element:visited

Example 3: the syntax of pseudo-class in css

The syntax of pseudo-classes:

selector:pseudo-class {
  	property:value;
}

Example 4: pseudo elements css

::after 	Matches a stylable element appearing after the originating element's actual content.
::before 	Matches a stylable element appearing before the originating element's actual content.
::first-letter 	Matches the first letter of the element.
::first-line 	Matches the first line of the containing element.
::grammar-error 	Matches a portion of the document containing a grammar error as flagged by the browser.
::marker 	Matches the marker box of a list item, which typically contains a bullet or number.
::selection 	Matches the portion of the document that has been selected.
::spelling-error 	Matches a portion of the document containing a spelling error as flagged by the browser.

Example 5: css pseudo classes

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited 
link */
a:visited {
  color: #00FF00;
}

/* mouse over link */

a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {

  color: #0000FF;
}

Example 6: css pseudo classes

button/anchor:hover / :active / :checked
:nth-of-type(3) // select the third element
:nth-of-type(3n) // select an element every three