Basic Selectors and Specificity

Introduction to CSS Selectors

CSS selectors are patterns used to select and style HTML elements. They are the bridge between your HTML document and your style rules—telling the browser which elements should receive which styles.

Think of selectors as address labels on packages. Just as you might address a package to "All Residents" (universal selector), a specific person (element selector), everyone in a certain neighborhood (class selector), or someone with a unique ID (ID selector), CSS selectors target elements with varying levels of precision.

Types of Basic CSS Selectors

Let's explore each type of selector, its syntax, use cases, and examples.

1. Universal Selector (*)

The universal selector matches any element of any type and is denoted by an asterisk (*).

/* Selects ALL elements on the page */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. Type/Element Selectors

Type selectors target elements based on their HTML tag name.

/* Selects all paragraph elements */
p {
  line-height: 1.6;
  margin-bottom: 1em;
}

/* Selects all heading level 2 elements */
h2 {
  font-size: 1.5em;
  margin-top: 1em;
}

/* Selects all anchor elements */
a {
  color: #0066cc;
  text-decoration: none;
}

<h2>Product Features</h2>
<p>Our product includes amazing features.</p>
<p>Learn more <a href="features.html">here</a>.</p>

3. Class Selectors (.classname)

Class selectors target elements that have a specific class attribute value, prefixed with a period (.).

<div class="card">
  <h2 class="card-title">Product Name</h2>
  <p class="card-description">Product description here.</p>
  <button class="btn primary">Add to Cart</button>
</div>

<div class="card featured">
  <h2 class="card-title">Featured Product</h2>
  <p class="card-description">This is our featured product.</p>
  <button class="btn primary">Add to Cart</button>
</div>

/* Targets elements with class="card" */
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Targets elements with class="featured" */
.featured {
  background-color: #fffbcc;
  border-color: #e6c700;
}

/* Targets elements with class="card-title" */
.card-title {
  margin-top: 0;
  color: #333;
}

/* Targets elements with class="btn" */
.btn {
  padding: 0.5em 1em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* Targets elements with class="primary" */
.primary {
  background-color: #0066cc;
  color: white;
}

/* Targets elements with BOTH class="btn" AND class="primary" */
.btn.primary {
  font-weight: bold;
}

4. ID Selectors (#idname)

ID selectors target a single element with a specific id attribute value, prefixed with a hash (#).

<header id="main-header">
  <h1>Website Title</h1>
  <nav id="primary-navigation">
    <!-- Navigation items -->
  </nav>
</header>

<main id="content">
  <article id="featured-post">
    <h2>Featured Article</h2>
    <p>Article content here...</p>
  </article>
</main>

<footer id="main-footer">
  <p>© 2025 My Website</p>
</footer>

/* Targets the element with id="main-header" */
#main-header {
  background-color: #333;
  color: white;
  padding: 1rem;
}

/* Targets the element with id="primary-navigation" */
#primary-navigation {
  display: flex;
  justify-content: space-between;
}

/* Targets the element with id="featured-post" */
#featured-post {
  border-left: 4px solid #0066cc;
  padding-left: 1rem;
}

5. Attribute Selectors

Attribute selectors target elements based on the presence or value of their attributes. They use square brackets notation.

/* Selects all elements with the "type" attribute */
[type] {
  margin-bottom: 1rem;
}

/* Selects elements where type="text" exactly */
[type="text"] {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

/* Selects elements whose class attribute contains "btn" */
[class*="btn"] {
  cursor: pointer;
}

/* Selects elements with href attributes starting with "https" */
[href^="https"] {
  color: green;
}

/* Selects elements with src attributes ending in ".jpg" */
[src$=".jpg"] {
  border: 2px solid #ddd;
}

/* Case-insensitive matching with "i" flag */
[lang="en" i] {
  font-family: 'Arial', sans-serif;
}

<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<a href="https://example.com">Secure Link</a>
<a href="http://example.org">Regular Link</a>
<img src="photo.jpg" alt="Photo">
<div lang="en-US">English content</div>

/* Style all required inputs */
[required] {
  border-left: 3px solid #cc0000;
}

/* Style inputs by type */
[type="checkbox"], [type="radio"] {
  margin-right: 0.5rem;
}

/* Style download links */
[href$=".pdf"], [href$=".doc"], [href$=".zip"] {
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
}

[href$=".pdf"] {
  background-image: url('pdf-icon.svg');
}

/* Target elements with data attributes (modern approach) */
[data-status="active"] {
  background-color: #e6ffe6;
}

[data-status="pending"] {
  background-color: #fff9e6;
}

[data-status="inactive"] {
  background-color: #f9f9f9;
  color: #999;
}

Combining Selectors

Selectors can be combined to create more targeted and powerful patterns:

/* Targets <p> elements inside .article */
.article p {
  font-size: 1rem;
}

/* Targets <li> elements that are direct children of .nav */
.nav > li {
  display: inline-block;
}

/* Targets <p> elements immediately after <h2> */
h2 + p {
  font-weight: bold;
}

/* Targets all <p> elements after <h2> within the same parent */
h2 ~ p {
  color: #666;
}

/* Targets <h1>, <h2>, and <h3> elements */
h1, h2, h3 {
  font-family: 'Georgia', serif;
}

CSS Specificity

Specificity determines which CSS rule applies when multiple rules could style the same element. It's a weight assigned to each selector, with more specific selectors overriding less specific ones.

Think of specificity as a scoring system in a competition. The selector with the highest score wins and gets to apply its styles.

Calculating Specificity

Specificity is typically represented as four values: a-b-c-d

• a: Inline styles (1 if present, 0 if not)
• b: Number of ID selectors
• c: Number of class selectors, attribute selectors, and pseudo-classes
• d: Number of type selectors and pseudo-elements

Specificity Examples

<div id="container">
  <p class="text">This is a paragraph with a class.</p>
  <p class="text highlight">This is a highlighted paragraph.</p>
  <p id="special" class="text">This is a special paragraph.</p>
</div>

/* Specificity: 0-0-0-1 */
p {
  color: black;
  font-size: 16px;
}

/* Specificity: 0-0-1-0 */
.text {
  color: blue;
}

/* Specificity: 0-0-2-0 */
.text.highlight {
  color: orange;
}

/* Specificity: 0-1-0-1 */
#container p {
  color: green;
}

/* Specificity: 0-1-1-0 */
#special.text {
  color: red;
}

/* Specificity: 0-0-1-1 with !important */
p.text {
  color: purple !important;
}

The Cascade

When several rules have equal specificity, the last one declared in the CSS will take precedence. This is part of what makes CSS "cascading."

/* This rule is applied first */
.button {
  background-color: blue;
}

/* This rule, with equal specificity but defined later, 
   will override the previous one */
.button {
  background-color: green;
}

The full order of precedence in CSS is:

1. Origin and importance: User agent (browser defaults) → User styles → Author styles → Author styles with !important → User styles with !important
2. Specificity: As detailed above
3. Order of appearance: Last declaration wins when specificity is equal

Best Practices

Selector Best Practices

• Use classes for reusable components: Class selectors provide the right balance of specificity and reusability
• Avoid excessive nesting: Deep nesting increases specificity and reduces maintainability
• Be specific but not too specific: .card-title is better than .card > h2
• Use semantic class names: Name by purpose (.primary-button), not by appearance (.blue-button)
• Consider selector performance: Browsers read selectors from right to left, so .posts li is more efficient than ul li a.post-link

Specificity Best Practices

• Maintain a "specificity ceiling": Try to keep all selectors at a similar level of specificity
• Avoid using !important: It breaks the natural cascade and becomes a specificity arms race
• Minimize use of IDs for styling: Use them sparingly, primarily for JavaScript hooks
• Use specificity as a feature, not a fix: If you're constantly fighting specificity, consider refactoring your CSS
• Leverage the cascade: Put general styles first, then more specific variations

Modern CSS Methodologies

Several methodologies have emerged to manage selector complexity and specificity:

/* Block component */
.card {}

/* Element that depends on the block */
.card__title {}
.card__image {}

/* Modifier that changes the style of the block */
.card--featured {}
.card--compact {}

<div class="bg-white rounded shadow p-4 mb-6">
  <h2 class="text-xl font-bold text-gray-800 mb-2">Card Title</h2>
  <p class="text-gray-600">Card content here...</p>
</div>

Real-World Applications

E-commerce Product Card

Here's how selectors and specificity might apply in a real-world component:

<div class="product-card" data-category="electronics">
  <span class="product-badge new">New!</span>
  <img class="product-image" src="laptop.jpg" alt="Laptop">
  <div class="product-info">
    <h3 class="product-title">Ultra Slim Laptop</h3>
    <p class="product-price">$999</p>
    <div class="product-rating">
      <span class="star filled"></span>
      <span class="star filled"></span>
      <span class="star filled"></span>
      <span class="star half-filled"></span>
      <span class="star"></span>
    </div>
    <button class="btn-primary">Add to Cart</button>
  </div>
</div>

/* Base component styling with class selector */
.product-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  transition: transform 0.3s ease;
}

/* Element selector with attribute selector */
.product-card[data-category="electronics"] {
  border-color: #0066cc;
}

/* Descendent selector for nested elements */
.product-card .product-title {
  font-size: 1.25rem;
  margin-top: 0.5rem;
}

/* Class selector for specific element */
.product-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
}

/* Multiple selector matching for variants */
.product-badge.new {
  background-color: #22c55e;
  color: white;
}

/* Adjacent sibling selector */
.product-rating + button {
  margin-top: 1rem;
}

/* Pseudo-class for interactive states */
.btn-primary:hover {
  background-color: #0055aa;
}

/* Combination of attribute and pseudo-class selectors */
[class*="btn-"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Practice Exercise

Conclusion

Understanding CSS selectors and specificity is foundational to becoming proficient with CSS. These concepts impact how you structure both your HTML and CSS files, and how styles are applied to your web pages.

Remember these key takeaways:

• Different selector types provide varying levels of precision, from broad (universal) to highly specific (ID)
• Specificity determines which styles are applied when rules conflict
• The cascade refers to how styles are applied based on source order, when specificity is equal
• Modern CSS methodologies focus on managing specificity to create maintainable stylesheets

As you build more complex projects, these concepts will become increasingly important. Thoughtful use of selectors and understanding of specificity helps create CSS that is both powerful and maintainable.

Additional Resources

• MDN Web Docs: CSS Selectors
• Specificity Calculator
• CSS-Tricks: Specifics on CSS Specificity
• BEM Methodology
• Web.dev: Specificity