CSS: simple selectors

Simple Selectors

These match elements based on a single criterion.

• CSS: type selector (tag name)
• CSS: universal selector (* any tag)
• CSS: class selector (.x)
• CSS: ID selector (#)
• CSS: attribute selector ([x])
• 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 */

#jzvN4 {
 color: red;
}

/* Attribute Selectors */

[target] {
 color: red;
}

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

/* Universal Selector */

* {
 color: red;
}

/* Pseudo-class Selectors */

:hover {
 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;
}