pseudo css code example

Example 1: pseudo class css

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

Example 2: 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 3: css psedo class

button:hover {
  color: blue;
}

A pseudo-class is a word such as :hover that makes its changes
to the selected element by adding it along side the selector 
before the curly braces in CSS instead of inside the curly 
braces.

You can search for a list of pseudo-class online.

Example 4: pseudo elements css

psuedo element(An intuitive answer):
							keywords added to selectors (which are followed by 
                            colon ':' or double colon '::') which allow to target
                            specific element (or specific part of element).
example:
 you can style the first letter of a paragraph as->  p:first-letter{/*styles*/}

STRONG NOTE:  Keep in mind that  ::first-line pseudo-element  must be applied
			  to block level (elements which break line on use)
			  elements in order to take effect.

Example 5: What is a pseudo selector?

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer

Example 6: 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;
}