CSS Selectors

A selector is the part of CSS that picks which elements to style. Without selectors, your styles would hit everything on the page. With them you can style one button, every card, or a single paragraph. The tag selector is the simplest form. It targets every element of that type, so p styles all paragraphs.

Classes are for groups. You write a dot before the name, like .card, and the same class can be used on any number of elements. Ids are for unique elements. They start with a hash, like #header, and should appear only once per page. Reach for classes most of the time; they keep your styles reusable and your markup predictable.

Specificity decides conflicts

When two rules target the same element, the browser does not guess. It scores each selector: an id counts the most, a class counts less, and a tag selector counts least. So #hero text-align beats .card text-align even if it appears earlier in the file. Understanding specificity stops the "why is my style not applying" mystery. When a rule refuses to win, the fix is usually a more specific selector, not !important.

p { color: #334155; }        /* low */
.card p { color: #0f766e; }     /* higher */
#hero p { color: #b91c1c; }     /* highest */

Combining selectors

Commas group selectors that share styles, so h1, h2 { font-weight: bold; } styles both. A space creates a descendant selector: .card p targets paragraphs inside any element with the class card. Keep combinations shallow. Selectors like div .wrap > ul li are hard to read and break when the markup changes. If you need to go deep, a class on the element itself is usually cleaner.

h1, h2 {
  font-weight: bold;
}

.card p {
  line-height: 1.6;
}

Common selector mistakes

Newcomers style everything with ids, then discover the style cannot be reused and fights every other rule. Another classic: styling by appearance instead of role, like .blue-text, then rewriting CSS when the design changes. Name classes after what the element is, like .alert or .card, and you can restyle the whole page without touching the HTML.

/* name by role, not by color */
.error { color: #b91c1c; }
.success { color: #15803d; }

Syntax

p { color: #334155; }

.card {
  background: #f8fafc;
  border-radius: 8px;
}

#hero {
  text-align: center;
}

#hero p{color:red} /* beats .card p */