Cascade FallsISSUE #4 of 33

selectors · element · class · id

StylaVSThe Specificity Sphinx

Styla saysThe three core selectors: element (tag), class (.name), and id (#name).

Type selectors target every element of a kind (p). Class selectors (.btn) target any element wearing that class — reusable and the workhorse. Id selectors (#hero) target one unique element and carry high specificity. Reach for classes by default; use ids sparingly.

Power-ups you unlock

p → all <p> elements
.btn → any element with class="btn"
#hero → the one element with id="hero"
Classes are reusable; ids are unique

The Specificity Sphinx attacks — common mistakes

Styling with ids and fighting their high specificity later
Reusing an id (must be unique)
Naming classes by looks (.red) instead of purpose (.danger)

Boss battleStyle a tag, a class, and an id in one stylesheet and apply all three to a small page.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>p{color:#8a82b0}.lead{color:#e6e0ff}#title{color:#b388ff}</style></head><body style="background:#06040d">
<h1 id="title">id selector</h1><p class="lead">class selector</p><p>type selector</p></body></html>

▶ Open the interactive comic issue

‹ How To Add Css · Inline · Internal · External Selectors · Attribute · Pseudo-Class · Pseudo-Element ›