Basic (type/element) selectors target every HTML element of a given tag name, like p or div, applying the same declarations to all matching elements on the page.

Syntax

elementname {
  property: value;
}

Deep Dive Course

A type selector is simply the HTML tag name written without any prefix, p, h1, div, and it matches every element of that type anywhere in the document, regardless of nesting or attributes — it's the broadest, least specific kind of named selector, carrying the lowest specificity of any selector other than the universal selector, which means it's easily overridden by class or ID selectors targeting the same elements. Type selectors are typically used for broad, foundational styling that should apply consistently across an entire site, like default margins on paragraphs or a base font on the body.

1Understanding Basic Selectors

💡

Type selectors carry the lowest specificity of any named selector, so use them for broad, foundational defaults, like resetting margins or setting a base font, that you expect more specific class or ID selectors to override later as needed.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of Basic Selectors showing how it is used in production CSS code.

editor.html

button {
  padding: 8px 16px;
  border-radius: 4px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Basic Selectors:

1. Use type selectors for broad, site-wide defaults that should apply everywhere unless more specifically overridden

2. Avoid relying on type selectors for anything needing precise, individual targeting, since they match every instance of that element with no way to exclude specific ones

3. Layer more specific class or ID selectors on top of type-selector defaults, rather than trying to make type selectors themselves handle exceptions

⚠️

Tip: Type selectors carry the lowest specificity of any named selector, so use them for broad, foundational defaults, like resetting margins or setting a base font, that you expect more specific class or ID selectors to override later as needed.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

button {
  padding: 8px 16px;
  border-radius: 4px;
}

Best Practices

Use type selectors for broad, site-wide defaults that should apply everywhere unless more specifically overridden
Avoid relying on type selectors for anything needing precise, individual targeting, since they match every instance of that element with no way to exclude specific ones
Layer more specific class or ID selectors on top of type-selector defaults, rather than trying to make type selectors themselves handle exceptions

Interview Question

Why is a type selector considered the least specific way to target elements, and how does that affect what happens when a class selector targets the same element?▼

Hint: Think about how CSS's specificity scoring system weighs a type selector's contribution compared to a class selector's.

CSS's specificity system assigns a numeric weight to each kind of selector component in a rule, and a type selector, matching purely by tag name, contributes the smallest possible weight of any named selector, specifically less than a class selector, an attribute selector, or a pseudo-class, all of which share the next tier up. This means that whenever a class selector targets the same element a type selector also matches, the class selector's rule wins for any conflicting property, regardless of which rule appears first or second in the stylesheet's source order, purely because its specificity score is mathematically higher. This is exactly the intended, standard design of type selectors: they're meant to establish broad, easily-overridden defaults, while more specific selectors, like classes, are meant to layer targeted exceptions or refinements on top without needing to fight the type selector's specificity.

Exercises

MediumPractice using Basic Selectors in a real scenario.

View Solution

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

Frequently Asked Questions

Why is a type selector considered the least specific way to target elements, and how does that affect what happens when a class selector targets the same element?▼

Related Functions

Class-SelectorsID-SelectorsUniversal-Selectors