DEV Community

Cover image for Day 23/180 of Frontend Dev: Mastering CSS Selectors - Element, Class, ID & Grouping
CodeWithDhanian
CodeWithDhanian

Posted on

Day 23/180 of Frontend Dev: Mastering CSS Selectors - Element, Class, ID & Grouping

#frontend #frontendchallenge #webdev

Welcome to Day 23 of the 180 Days of Frontend Development Challenge. Today we'll dive deep into CSS selectors - the core mechanism for targeting HTML elements. For comprehensive selector techniques, see the Learn Frontend Development in 180 Days ebook.

1. Element Selectors (Type Selectors)

Basic Syntax 

element {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Implementation Examples 

/* Target all <p> elements */
p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

/* Style all <h2> headings */
h2 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
}

/* Style all links */
a {
  text-decoration: none;
  color: #3498db;
}
Enter fullscreen mode Exit fullscreen mode

When to Use

  • Base/reset styles
  • Typography defaults
  • Broad element-specific styling

Professional Considerations 

/* Avoid overusing - can be too broad */
div {
  padding: 1rem; /* Affects ALL divs */
}
Enter fullscreen mode Exit fullscreen mode

2. Class Selectors (Reusable Styles)

Basic Syntax 

.class-name {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Implementation Examples 

<!-- HTML -->
<button class="btn btn-primary">Submit</button>
<article class="card featured"></article>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.featured {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

When to Use

  • Component-based styling
  • Reusable UI patterns
  • State variations
  • Most styling needs

Best Practices 

/* Use semantic names */
.article-card {} /* Good */
.box-style-1 {}  /* Avoid */

/* Follow BEM methodology */
.nav__item--active {}
Enter fullscreen mode Exit fullscreen mode

3. ID Selectors (Unique Elements)

Basic Syntax 

#id-name {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Implementation Examples 

<!-- HTML -->
<header id="main-header"></header>
<section id="pricing"></section>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
#main-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

#pricing {
  background: #f8f9fa;
  padding: 4rem 0;
}
Enter fullscreen mode Exit fullscreen mode

When to Use

  • Unique page sections
  • Anchor link destinations
  • JavaScript hooks

Professional Considerations 

/* Avoid styling with IDs - too specific */
#submit-button {
  /* Hard to override */
}

/* Better alternative */
.button-submit {}
Enter fullscreen mode Exit fullscreen mode

4. Grouping Selectors

Basic Syntax 

selector1, 
selector2, 
selector3 {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Implementation Examples 

/* Reset margins for headings */
h1, h2, h3, h4 {
  margin-top: 0;
}

/* Shared button styles */
.btn, 
input[type="submit"], 
input[type="button"] {
  cursor: pointer;
}

/* Print styles */
@media print {
  nav, 
  .ad-banner, 
  .page-actions {
    display: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

When to Use

  • Applying common styles
  • Resets/normalization
  • Print/special media queries
  • Vendor prefix groupings

Best Practices 

/* Group logically related selectors */
.primary-btn, 
.secondary-btn, 
.danger-btn {
  min-width: 120px;
}

/* Avoid unrelated groupings */
h1, .alert-box, #user-profile {
  /* Potentially confusing */
}
Enter fullscreen mode Exit fullscreen mode

5. Selector Specificity Hierarchy

Specificity Weight

  1. Inline styles (1000)
  2. ID selectors (100)
  3. Class/attribute selectors (10)
  4. Element/pseudo-element selectors (1)

Calculation Examples 

#nav .item.active {} /* 100 + 10 + 10 = 120 */
section#about p {}    /* 1 + 100 + 1 = 102 */
.btn:hover {}         /* 10 + 10 = 20 */
div {}                /* 1 */
Enter fullscreen mode Exit fullscreen mode

Important Rule 

/* Avoid when possible */
.warning-text {
  color: red !important; /* Overrides everything */
}
Enter fullscreen mode Exit fullscreen mode

6. Practical Application

HTML Structure 

<article class="card featured" id="feature-card">
  <h2 class="card__title">Featured Product</h2>
  <p class="card__text">Description here...</p>
  <button class="btn" id="buy-now">Purchase</button>
</article>
Enter fullscreen mode Exit fullscreen mode

CSS Styling 

/* Element selector */
article {
  margin-bottom: 2rem;
}

/* Class selector */
.card {
  border: 1px solid #ddd;
  padding: 1.5rem;
}

/* ID selector */
#feature-card {
  border-color: #3498db;
}

/* Grouped selectors */
.card__title, 
.card__text {
  margin: 0 0 1rem 0;
}

/* Combined selectors */
.card.featured {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Specificity example */
#feature-card .btn {
  background: #3498db; /* Wins over .btn */
}
Enter fullscreen mode Exit fullscreen mode

7. Exercises

  1. Selector Practice

    • Create styles using all selector types
    • Demonstrate specificity conflicts
    • Show how grouping reduces code

  2. Refactor This CSS

   #header nav ul li a {
     color: white;
   }
   /* Convert to class-based */
Enter fullscreen mode Exit fullscreen mode
  1. Specificity Wars
    • Create competing selectors for the same element
    • Predict which styles will apply
    • Verify in browser DevTools

What's Next?

Tomorrow (Day 24) explores Advanced CSS Selectors including attribute selectors, pseudo-classes, and combinators. For complete selector mastery including CSS4 features, see Chapter 18 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Use specificity graphs to audit your CSS:

# Install specificity-graph
npm install -g specificity-graph

# Generate report
specificity-graph styles/*.css
Enter fullscreen mode Exit fullscreen mode

Top comments (0)