Pseudo-classes and Pseudo-elements

Code

/* Pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* Form pseudo-classes */
input:focus { border-color: blue; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:placeholder-shown { background: #f9f9f9; }

/* Structural pseudo-classes */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n) { color: red; }
li:nth-child(even) { background: #eee; }
li:not(.active) { opacity: 0.5; }
p:empty { display: none; }

/* Pseudo-elements */
p::before {
    content: ">> ";
    color: gray;
}

p::after {
    content: " <<";
    color: gray;
}

/* First letter */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* First line */
p::first-line {
    color: #555;
}

/* Selected text */
::selection {
    background: yellow;
    color: black;
}

/* Clear float */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Explanation

Pseudo-classes select elements in specific states; pseudo-elements create virtual elements; ::before/::after commonly use the content property.

More CSS Snippets