Codectionary / Developer documentation / CSS

Basic Selectors

CSS selectors target elements to style. Type selectors match by tag name, class selectors (.name) match elements with that class, ID selectors (#name) match a single unique element, and the universal selector (*) matches everything. Classes are the most commonly used selector for reusable styling.

Syntax

element { }
.class { }
#id { }
* { }

Examples

The Four Basic Types

Type, class, ID, and universal selectors.

p { color: #333; }              /* every <p> element */
.highlight { background: yellow; } /* every element with class="highlight" */
#main-header { font-size: 2rem; }  /* the single element with id="main-header" */
* { box-sizing: border-box; }       /* every element on the page */
  1. The markup supplies a type selector, class, id and combined-class target.
  2. Only matching elements receive each declaration; the surrounding structure makes the differences visible.
  3. Remove one class from the HTML to see why .card.featured requires both classes.
HTML used by this example
<main id="main-header"><p>A normal paragraph</p><p class="highlight intro">A highlighted introduction</p><article class="card featured">An article with both card and featured classes.</article></main>

Combining Selectors

Selectors can be combined for more specific targeting.

p.intro { font-weight: bold; }   /* only <p> elements that ALSO have class="intro" */
.card.featured { border: 2px solid gold; } /* elements with BOTH classes */
  1. The markup supplies a type selector, class, id and combined-class target.
  2. Only matching elements receive each declaration; the surrounding structure makes the differences visible.
  3. Remove one class from the HTML to see why .card.featured requires both classes.
HTML used by this example
<main id="main-header"><p>A normal paragraph</p><p class="highlight intro">A highlighted introduction</p><article class="card featured">An article with both card and featured classes.</article></main>

Parameters and values

  • element (type selector): Matches all elements of that tag name
  • .class (class selector): Matches all elements with that class
  • #id (ID selector): Matches the single element with that id
  • * (universal selector): Matches every element

Best practices

  • Prefer classes over IDs for styling - classes are reusable across multiple elements, while IDs must be unique per page and carry high specificity that is hard to override
  • Avoid styling directly by element type (like p or div) in larger projects, since it applies globally and is easy to accidentally affect unrelated content
  • Use the universal selector (*) sparingly, typically just for resets like box-sizing, since it applies to literally everything
  • Combine class selectors (.card.featured) rather than deeply nesting selectors, for flatter, more maintainable specificity

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading