Pseudo Elements and Classes

::after:

The ::after pseudo-element allows you to insert content after the content of an element, which is often used for decorative or additional styling.

Example:

p::after {
    content: " (Read more)";
    color: #007bff;
}

::before:

Similar to ::after, the ::before pseudo-element inserts content before the content of an element, useful for creating labels or icons.

Example:

button::before {
    content: "\f054"; /* Unicode for a font-awesome icon */
    font-family: FontAwesome;
}

::first-letter:

The ::first-letter pseudo-element targets the first letter of a block-level element, enabling unique styling for initial characters.

Example:

p::first-letter {
  font-size: 1.5em;
   color: #FF5733;
}

::first-line:

The ::first-line pseudo-element selects the first line of text within a block-level element for customized styling.

Example:

.quote::first-line {
  font-style: italic;
}

::marker:

The ::marker pseudo-element styles list item markers, such as bullets or numbers, allowing customization of list styles.

Example:

ul::marker {
   color: #3498db;
}

::selection:

The ::selection pseudo-element targets the portion of text selected by the user, permitting unique styling for selected text.

Example:

::selection {
  background-color: #ffa500;
  color: white;
}

:active:

Applies styles to an element when it is actively being clicked.

Example:

button:active {
    background-color: blue;
}

:checked:

Targets checked input elements, like checkboxes or radio buttons.

Example:

input[type="checkbox"]:checked {
    border: 2px solid green;
}

:disabled:

Styles elements that are disabled.

Example:

input:disabled {
    opacity: 0.5;
}

:empty:

Selects elements with no children or text content.

Example:

p:empty {
    display: none;
}

:enabled:

Targets elements that are enabled (opposite of :disabled).

Example:

button:enabled {
    background-color: #00FF00;
}

:first-child:

Selects the first child of a parent element.

Example:

ul li:first-child {
    font-weight: bold;
}

:first-of-type:

Targets the first element of its type within a parent.

Example:

p:first-of-type {
    font-style: italic;
}

:focus:

Styles an element when it gains focus.

Example:

input:focus {
    border-color: red;
}

:hover:

Applies styles when the mouse hovers over an element.

Example:

a:hover {
    text-decoration: underline;
}

:in-range

Targets input elements with a valid value within a specified range.

Example:

input[type="number"]:in-range {
    background-color: lightgreen;
}

:invalid:

Styles input elements with invalid data.

Example:

input:invalid {
    border-color: red;
}

:lang(language):

Selects elements with a specific language attribute.

Example:

p:lang(fr) {
    font-family: 'Helvetica', sans-serif;
}

:last-child:

Targets the last child of a parent element.

Example:

ul li:last-child {
    font-weight: bold;
}

:last-of-type:

Selects the last element of its type within a parent.

Example:

div p:last-of-type {
    color: purple;
}

:link:

Styles unvisited links.

Example:

a:link {
    text-decoration: none;
}

:not(selector):

Selects elements that do not match a specific selector.

Example:

p:not(.special) {
    font-size: 16px;
}

:nth-child(n):

Targets elements based on their position within a parent.

Example:

li:nth-child(2n) {
    background-color: #ECECEC;
}

:nth-last-child(n):

Selects elements based on their position from the end within a parent.

Example:

div > p:nth-last-child(3) {
    font-weight: bold;
}

:nth-last-of-type(n):

Styles elements based on their position from the end of a parent element with the same type.

Example:

ul > li:nth-last-of-type(odd) {
    color: orange;
}

:nth-of-type(n):

Selects elements based on their position within a parent element with the same type.

Example:

ul > li:nth-of-type(3n) {
    text-decoration: underline;
}

:only-of-type:

Styles elements that are the only one of their type within a parent.

Example:

p:only-of-type {
    font-style: italic;
}

:only-child:

Selects elements that are the only child of their parent.

Example:

div:only-child {
    border: 1px solid #999;
}

:optional:

Styles optional input elements.

Example:

input:optional {
    border-color: lightgray;
}

:out-of-range:

Targets input elements with values outside a specified range.

Example:

input[type="number"]:out-of-range {
    border-color: red;
}

:read-only:

Styles input elements that are read-only.

Example:

input:read-only {
    background-color: #F2F2F2;
}

:read-write:

Styles input elements that are read-write (opposite of :read-only).

Example:

input:read-write {
    border-color: blue;
}

:required:

Selects required input elements.

Example:

input:required {
    border-color: green;
}

:root:

Targets the root element of the document (usually <html>).

Example:

:root {
    --main-bg-color: lightgray;
}
body {
    background-color: var(--main-bg-color);
}

:target:

Styles the target element when navigating to an anchor link.

Example:

#section-1:target {
    background-color: yellow;
}

:valid:

Selects input elements with valid data (opposite of :invalid).

Example:

input:valid {
    border-color: green;
}