CSS: simple selectors

Simple Selectors

These match elements based on a single criterion.

• CSS: element selector (tag name)
• CSS: universal selector (* any tag)
• CSS: class selector
• CSS: ID selector
• CSS: attribute selector
• CSS: pseudo-class selector (:)
• CSS: pseudo-element selector (::)

/* examples of all simple selectors */

/* Element Selectors, aka Type Selectors */

div {
 color: red;
}

p {
 color: red;
}

/* Class Selectors */

.abc {
 color: red;
}

/* ID Selectors */

#xkhh8j {
 color: red;
}

/* Universal Selector */

* {
 color: red;
}

/* Attribute Selectors */

[target] {
 color: red;
}

[data-accessed^="2026"] {
 color: red;
}

/* Pseudo-class Selectors */

:hover {
 color: red;
}

:nth-child(2) {
 color: red;
}

:first-child {
 color: red;
}

:focus {
 color: red;
}

:not(.aa) {
 color: red;
}

/* Pseudo-element Selectors */

::before {
 content: "🔍";
}

::after {
 color: red;
}

::first-line {
 color: red;
}