11/6/2017 - 7:05 PM

Psuedo Classes and Elements


:active :any :checked :default :dir() :disabled :empty :enabled :first :first-child :first-of-type :fullscreen :focus :focus-within :hover :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited

Pseudo-elements ::after ::before ::first-letter ::first-line ::selection ::backdrop

/* All elements with an attribute "href", which values
   start with "http", will be added an arrow after its
   content (to indicate it's an external link) */
[href^=http]::after {
  content: '⤴';
/* These styles will style our link
   in all states */
a {
  color: blue;
  font-weight: bold;

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:focus {
  color: darkred;
  text-decoration: none;
<a href="" target="_blank">Mozilla Developer Network</a>
  <li><a href="">CSS</a> defined in the MDN glossary.</li>
  <li><a href="">HTML</a> defined in the MDN glossary.</li>