CSSDomBeginner

Selector types (element, class, id, universal)

CSS selectors target HTML elements for styling based on their type, class, ID, or universally.

Review the syntaxStudy the examplesOpen the coding app
element { ... }
.class { ... }
#id { ... }
* { ... }
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

CSS selectors target HTML elements for styling based on their type, class, ID, or universally.

CSS selectors are patterns used to select and style HTML elements on a web page. They are the fundamental building blocks of CSS, allowing developers to apply specific styles to specific parts of a document. There are several basic types of selectors: 1. **Element (Type) Selectors**: These target all instances of a specific HTML element (e.g., `p` selects all paragraphs, `h1` selects all H1 headings). They are straightforward but can be too broad for fine-grained control. 2. **Class Selectors**: These target elements that have a specific `class` attribute. They are prefixed with a dot (`.`) followed by the class name (e.g., `.highlight` selects all elements with `class="highlight"`). Classes are highly versatile as multiple elements can share the same class, and an element can have multiple classes. 3. **ID Selectors**: These target a single element that has a specific `id` attribute. They are prefixed with a hash (`#`) followed by the ID name (e.g., `#main-nav` selects the element with `id="main-nav"`). IDs must be unique within an HTML document, making ID selectors highly specific. 4. **Universal Selector**: This targets all elements in the HTML document. It is represented by an asterisk (`*`). While powerful, it's often used with caution due to its broad impact on performance and potential for unintended styling. Understanding these basic selector types is crucial for writing effective and maintainable CSS, enabling precise control over the visual presentation of web content. They form the basis for more complex selectors like attribute selectors and combinators.

Quick reference

Syntax

element { ... }
.class { ... }
#id { ... }
* { ... }

See it in practice

Examples

1

Element selector: Styling all paragraphs

p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
Output:
All <p> elements on the page will have Arial font and 1.5 line height.

This selector targets every `<p>` (paragraph) element in the document, applying the specified font and line height to all of them.

2

Class selector: Highlighting specific text

.highlight {
  background-color: yellow;
  font-weight: bold;
}

<!-- HTML -->
<p>This is normal text. <span class="highlight">This text is highlighted.</span></p>
Output:
The text within the <span> with class 'highlight' will be yellow and bold.

The `.highlight` selector applies styles only to elements that have the `class="highlight"` attribute, allowing for reusable styling.

3

ID selector: Styling a unique header

#main-header {
  color: navy;
  text-align: center;
}

<!-- HTML -->
<h1 id="main-header">Website Title</h1>
Output:
The <h1> element with id 'main-header' will be navy blue and centered.

The `#main-header` selector targets the single element with `id="main-header"`, providing highly specific styling for unique page components.

4

Universal selector: Applying base styles

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Output:
All elements on the page will have zero margin and padding, and use the border-box model.

The `*` selector applies the specified styles to every single element in the document, often used for resetting default browser styles.

Debug faster

Common Errors

1

Misunderstanding Specificity

Cause: Styles not applying as expected due to conflicting rules and a lack of understanding of selector specificity.

Fix: Learn CSS specificity rules (ID > Class > Element). Use more specific selectors or combine them when necessary, but avoid over-specificity. ID selectors are very specific, class selectors are less so, and element selectors are the least specific.

p { color: red; } /* Less specific */
.text-blue { color: blue; } /* More specific */
<p class="text-blue">This text will be blue, not red.</p>

Runtime support

Compatibility

N/AAll modernCSS1+

Source: MDN Web Docs

Common questions

Frequently Asked Questions

CSS selectors target HTML elements for styling based on their type, class, ID, or universally.

Misunderstanding Specificity: Learn CSS specificity rules (ID > Class > Element). Use more specific selectors or combine them when necessary, but avoid over-specificity. ID selectors are very specific, class selectors are less so, and element selectors are the least specific.