CSS Selectors

Jaisurya

Posted on Jul 14 • Edited on Jul 15

Here are the four foundational selectors you’ll use 90% of the time.

1. The Universal Selector ( * )

This selects everything on the HTML page.

* {
  margin: 0;
  box-sizing: border-box;
}

Enter fullscreen mode Exit fullscreen mode

2. The Type Selector ( element )

HTML tags matching the name directly. This is best for setting baseline styles for paragraphs, headings, or buttons.

p {
  color: #333;
  line-height: 1.5;
}

Enter fullscreen mode Exit fullscreen mode

3. The Class Selector ( .class )

Any element with a matching class attribute. Uses a dot ( . ).
This is best for reusable styles you want to apply to multiple different elements.

.btn-primary {
  background: blue;
  color: white;
}

HTML: <button class="btn-primary">Click</button>

Enter fullscreen mode Exit fullscreen mode

4. The ID Selector ( #id )

A single element with a matching id attribute. Uses a hashtag ( # ).Unique, one-of-a-kind elements on a page (like a specific sidebar or nav).

#main-header {
  background: black;
}

HTML: <header id="main-header">...</header>

Enter fullscreen mode Exit fullscreen mode