SyntaxStudy
Sign Up
Home CSS Reference pseudo-classes

pseudo-classes

selector

Keywords added to selectors that specify a special state or position of the element.

Syntax

selector:hover, :focus, :active, :nth-child(), :not()

Example

css
a:hover  { color: #e74c3c; }
a:focus  { outline: 2px solid #3498db; }
a:active { color: #c0392b; }
a:visited { color: purple; }

/* Structural */
li:first-child { font-weight: bold; }
li:last-child  { border-bottom: none; }
li:nth-child(even) { background: #f0f0f0; }

/* Negation */
input:not([type='submit']) { border: 1px solid #ccc; }