WDD 130: Web Fundamentals

W03 Learning Activity: CSS Selectors – Type, Universal, Class, ID

Overview

CSS selectors are the way you specify which elements you want to style.

Prepare

A CSS rule's selector is the first part of the rule that tells the browser which HTML elements should have the CSS property values applied. The elements selected by the selector are referred to as the subjects of the selector.

CSS Selector Types

CSS selectors can be different types, depending on whether you want to specify the element by its type, id, or class.

CSS Selector Types
Selector Type Example CSS Rule Application
Universal * { ... } Applies to all elements
Type (Element) h1 { ... } Applies to all <h1> elements
Class .highlight { ... } Applies to all elements with the "highlight" class value
ID #main-nav { ... } Applies to the one element with the "main-nav" id value

Using the Class Attribute

A class attribute can be applied to many elements in a document. More than one class can be applied to a single element. A class can be selected in CSS by using period (.) notation.

Class Attribute and Class Selector Examples
HTML CSS
<div class="callout highlight active">
<span class="highlight"> 		.highlight { declarations }
.callout { declarations }
.active { declarations }

Using the ID Attribute

An id attribute can only be applied to one element per document, and each element may only have one id. The id can be selected by a CSS id selector using hash (#) notation.

ID Attribute and ID Selector Example
HTML CSS
<nav id="sub-menu"> #sub-menu { declarations }

Use classes for most of your styling. Reserve ids for things that are truly unique on a page, such as the target of a link or the input that a label points to. An id selector also overrides class selectors, which can make styles harder to change later.

Activity Instructions

  1. In VS Code, open the class-and-id.html file located in the week03 folder.
  2. Also open the class-and-id.css file located in the styles subfolder of the week03 folder.
  3. Display the page in your browser using Live/Five Server and review the layout and styles applied to the div elements.
  4. In VS Code, remove the highlight class from the second <div>, leaving only one class for that element named box. What happens? You may need to open the CSS file to see the difference.
    Check Your Understanding 
    <div class="box">

    That second div is no longer styled with the "highlight" class and therefore loses those specific declarations.

  5. In the HTML, attempt to add another div element with the id attribute of "note" like this: 
    <div id="note">
  <p>Testing the note ID.</p>
</div>
    What happens in VS Code?
    Check Your Understanding

    In VS Code, the editor warns you of a problem by highlighting the duplicate id attribute with a squiggly line.

    Duplicate ID Warning

    Note that the browser will still apply the CSS style. Browsers tolerate duplicate ids, but it is invalid HTML and it breaks links, labels, and JavaScript that rely on the id.

Optional Resources