Cascade FallsISSUE #5 of 33

selectors · attribute · pseudo-class · pseudo-element

StylaVSThe Specificity Sphinx

Styla saysAttribute selectors and pseudo-classes/elements target elements by state, attribute, or position.

Beyond tag/class/id, CSS can select by attribute ([type="text"]), by state with pseudo-classes (:hover, :checked, :first-child), and target generated parts with pseudo-elements (::before, ::placeholder). These let you style without adding extra classes for every situation.

Power-ups you unlock

[attr] / [attr="val"] select by attribute
Pseudo-classes (:hover, :checked) target state
Pseudo-elements (::before) target generated parts
Combine them for precise, class-free targeting

The Specificity Sphinx attacks — common mistakes

Adding classes for states CSS can detect itself
Confusing pseudo-classes (:) with pseudo-elements (::)
Over-specific attribute selectors that are brittle

Boss battleStyle all inputs with type="email" differently from type="text" using attribute selectors.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>input{padding:6px}[type="email"]{border:2px solid #b388ff}a:hover{color:#8aff9d}</style></head><body style="background:#06040d;color:#e6e0ff;padding:20px">
<input type="text" placeholder="text"> <input type="email" placeholder="email"><br><br><a href="#">hover me</a></body></html>

▶ Open the interactive comic issue

‹ Selectors · Element · Class · Id Combinators · Descendant · Child · Sibling ›