Pseudo-classes
5 min read
Pseudo-classes style elements in specific states: :hover on mouseover, :focus on keyboard focus, :checked for checkboxes, :first-child and :nth-child() for structural position. Never completely remove :focus styles.
Pseudo-classes
a:hover { color: blue; } /* mouse over */
a:focus { outline: 2px solid; } /* keyboard focus */
a:visited { color: purple; } /* already visited */
a:active { color: red; } /* being clicked */
li:first-child { font-weight: bold; }
li:last-child { border: none; }
li:nth-child(2n){ background: #eee; } /* every even */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:disabled{ opacity: 0.5; }