Targeting Elements: Basic CSS Selectors

Learn how to select and style any element on your page using element, class, and ID selectors.

Styled Box

Hi there! Let's learn how CSS Selectors work. They're like addresses that tell our styles where to go.

/* Our style sheet is ready! */

Element Selector

The element selector (or type selector) is the most basic. You just use the name of an HTML tag (like h1, p, or div) to select all elements of that type on the page. It's great for setting default styles.

Class Selector

The class selector is your most versatile tool. It selects all elements that have a given class attribute. You define it with a period (.) followed by the class name (e.g., .highlight). You can apply the same class to many elements.

ID Selector

The ID selector is used for targeting one, unique element. It uses a hash symbol (#) followed by the element's id (e.g., #main-header). An ID must be unique within the entire HTML document.

A Note on Specificity

Specificity is the rule the browser uses to decide which CSS rule applies if multiple rules point to the same element. In general, an ID selector (e.g., #myId) is more specific than a class selector (e.g., .myClass), which is more specific than an element selector (e.g., p).

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

Class Selector

ID Selector

Element Selector

Completa el código:

#header______ { ... }

p______ { ... }

.button______ { ... }

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

/* To select all elements with class="warning", we use: */
warning { 
  color: red;
}

Unlock with Premium

Practice Example: Code Editor

Write a CSS rule to select the element with the ID main-logo and give it an opacity of 0.8.

Box-Sizing Property

Property	Description
box-sizing: content-box;	The element's size excludes padding and border (default value).
box-sizing: border-box;	The element's size includes padding and border.

* Write your CSS code and apply it to see how `box-sizing` affects the size of the elements.

Results:

Unlock with Premium

Knowledge Check

Which selector has the highest specificity?

Unlock with Premium

← Previous Next →

A Practical Guide to Using CSS Selectors

You know the basic selectors, but their real power comes from using them strategically to build clean, maintainable stylesheets. This guide shows how to apply them in real-world scenarios.

1. Element Selectors for Global Styling

Use element selectors in your "reset" or base styles to ensure consistency. For example, setting a base font and margin for all paragraphs.

p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

This paragraph has the base styles.

This one does too, creating consistency.

2. Class Selectors for Reusable Components

Classes are perfect for components you'll use repeatedly, like buttons, alerts, or cards. Define the styles once with a class, and apply it anywhere.

.btn-primary {
    background-color: #4f46e5;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
.btn-primary:hover {
    background-color: #4338ca;
}

3. ID Selectors for Major Page Sections

Since IDs are unique, they're best used for styling major, one-off sections of your page layout, such as the main header, footer, or a specific sidebar.

#main-footer {
    background-color: #1f2937;
    color: #d1d5db;
    padding: 2rem;
    text-align: center;
}

Practical Takeaway: Use a "top-down" approach. Start with broad element selectors for defaults, use reusable class selectors for components, and reserve ID selectors for unique page landmarks. This creates a clean and predictable stylesheet.