Skip to content

element.mdx

Latest commit

 

History

History
80 lines (57 loc) · 2.44 KB

element.mdx

File metadata and controls

80 lines (57 loc) · 2.44 KB
title The Element Selector
description Learn how to use the Element Selector (Type Selector) to target all instances of a specific HTML tag, forming the basis of CSS styling.
keywords
CSS Element Selector
Type Selector
HTML Tag Selector
Low Specificity
CSS Simple Selectors
CodeHarborHub
tags
CSS Element Selector
Type Selector
HTML Tag Selector
Low Specificity
CSS Simple Selectors
sidebar_label Element Selector

The Element Selector, also known as the Type Selector, is the most fundamental and least specific way to target elements in CSS.

It selects all instances of a specific HTML tag on your webpage. This selector is perfect for applying broad, default styles to common elements like paragraphs, headings, or list items.


How to Use the Element Selector

The syntax is straightforward: you simply use the name of the HTML tag as your selector.

The Syntax

tagname {
  /* declarations go here */
}

Examples

Selector Targets
h1 All <h1> elements.
p All <p> (paragraph) elements.
a All <a> (anchor/link) elements.
li All <li> (list item) elements.

Example Ruleset

This ruleset applies a base font size and margin to every paragraph on the page:

p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

h2 {
  color: #007bff;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

Specificity Score

The Element Selector has the lowest possible Specificity score (excluding the Universal Selector).

Selector Type Specificity Score
Element/Type (0, 0, 0, 1)

This low score means it is easily overridden by any other selector, such as a Class (score 10) or an ID (score 100). This is a desired trait, as element selectors are meant to provide the default base styles.

:::tip Base Styling Always use the Element Selector for base styles or reset styles. For instance, setting a default font-family on the body tag, or setting margin: 0; on all p tags. This establishes a clean foundation that more specific rules can easily customize. :::


Interactive Element Selector Demo

In the live editor, the CSS targets the div and p elements. Notice how every instance of those tags is affected.