CSS Selectors

Targeting specific elements with classes, IDs, and pseudo-classes

« CSS Introduction & Syntax« Previous The CSS Box Model »Next »

CSS selectors are used to "find" (or select) the HTML elements you want to style.

Primary Selectors

Element Selector: Selects HTML elements based on element name (e.g., p, h1).

Id Selector: Uses the # character followed by the id (e.g., #header). An id must be unique on the page!

Class Selector: Uses the . character followed by the class name (e.g., .button). Multiple elements can share classes.

Universal Selector: The * selector matches every single element on the page.

Combining Selectors

Try It Yourself »

<style>
  /* ID selector */
  #main-banner {
    background: #0f172a;
    color: white;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
  }
  
  /* Class selector */
  .btn-action {
    background: #04AA6D;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
    transition: transform 0.2s;
  }
  
  /* Pseudo-class hover state */
  .btn-action:hover {
    background: #059862;
    transform: translateY(-2px);
  }
</style>

<div id="main-banner">
  <h2>Supercharge Your Coding</h2>
  <button class="btn-action">Get Started Now</button>
</div>

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which character is used to select elements with a specific class in CSS?

« Previous: CSS Introduction & Syntax Next: The CSS Box Model »