Tim Carlson
Winter 2026

CSS Selectors

View of the Day

  • Quiz 1!

  • Admin & Project Proposal overview (quick)

  • CSS Selectors (lecture + PollEv)

  • CSS Class Semantics (lecture - if time)

  • Tasks for next week...

Quiz 1

This quiz is closed book, closed note.

Each question is worth 1 point.

Mark your chosen answers clearly, such as by circling
the letter.

You have 20 minutes, good luck!

Admin Reminder

When submitting problem sets, do two things:

  1. push your code to Github (to the main branch)

  2. Submit a link to Canvas

 

If you fix something later, just resubmit to Canvas, push to github and we'll rescore it 

Group Project

As a group of 3-4 people, create an interactive web application of your own design.

  • This is an interactive app, not an "information site"
  • The interactivity (what users do) is more important than the content (what user see)

 

See video for demos of example projects (linked from "Topic Proposal" assignment on Canvas).

Project Proposal

https://canvas.uw.edu/courses/1863022/assignments/10952520

Tell us what you're going to build!

  • What are the interactive features (what does it do)?
  • Written as simple web page (HTML & CSS)
  • All group members need to commit changes
    • ​use good commit messages!

Updating Lecture Code

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

Q&A / Review Poll

https://pollev.com/timca

CSS Selectors

/* tag selector */
p { } /* applied to <p> */

/* class selector */
.alert { } /* applied to elements with `class="alert"` */

/* id selector -- avoid this */
#navbar { } /* applied to elements with `id="navbar"` */

/* group selector */
h2, .alert, #navbar { } /* applied to <h2> OR .alert OR #navbar */

/* compound selector */
p.alert { } /* applied to <p> AND .alert */
.alert.success {} /* applied to .alert AND .success */

/* descendant selector */
header p { } /* applied to <p> anywhere INSIDE of <header>

/* child selector */
header > p { } /* applied to <p> DIRECTLY INSIDE of <header>

/* Pseudo-class selector */
li:focus, li:hover { } /* applied to element on focus or hover */

Chapter 6

CSS Specificity

If two rules apply, the more specific rule wins.

How to pick a selector

Some heuristics

  1. Main rule: be as general as you can, but as specific as you need to be
  2. "Will this rule apply to all elements of this type?" if not, add a meaningful class to the element
  3. Are the elements in this part of the page different from others? Use a descendant selector
  4. Do you want to "call out" an element with style? Add a class
  5. Rules usually don't have more than 2-3 selectors
  6. Primarily use class names for styling, not id attributes
  7. You never need to add more specificity to an id selector

CSS Class Names

There are only two hard problems in computer science: cache invalidation and naming things - Phil Karlton

CSS Class Names

Goals when naming classes (or anything):

  1. Understandability: explain what kind of styling is being applied
     

  2. Modifiability: make it easier to change styling later

Semantic Class Names

Name CSS classes based on the semantic meaning (purpose) of the element they are styling.

<div class="forum-post">...</div>

<nav class="side-nav">...</div>

<img class="avatar-icon">...</div>

<article class="breaking-news">...</article>

https://css-tricks.com/semantic-class-names/

/* can use descendant selectors for more detail */
.forum-post img { ... }

.side-nav ul a { ... }

Modular Class Names

Name CSS classes based on the (single) styling they apply. Combine multiple classes to style elements.

<div class="font-large text-red bg-secondary">...</div>

<img class="small rounded shadow">...</div>
.font-large { 
  font-size: 2em; 
  line-height: 1.4em;
}
.bg-secondary { background: #bbb; }

img.small { width: 140px; }
.rounded { border-radius: 50%; }

https://css-tricks.com/semantic-class-names/#comment-102547

A Naming Schema: BEM

http://getbem.com/naming/

<div class="block__element--modifier">
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text">
  <input 
     class="form__submit form__submit--disabled" 
     type="submit" />
</form>

The "part" of the page
navbar

An element in that block
tab

Flags or types; differentiators
selected 

<div class="navbar">
  <div class="navbar__tab">A tab</div>
  <div class="navbar__tab--selected">Selected Tab</div>
</div>

http://bit.ly/freecodecamp-bem

https://fonts.google.com/

It is also possible to specify an online font that the browser will download and display.

Fonts

Fonts are installed "per computer", so not every computer has the same fonts (which is why you set a default with font-family).

Fonts are installed "per computer", so not every computer has the same fonts (which is why you set a default with font-family).

p {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

Use this font

If first isn't available,
use this

If nothing else,
use this style of font-face

Font Units

All browsers have a "default" font size--generally 16px. We use relative font sizing in case of variations.

Note that units are "measurement units" (think: inches)

em relative to the parent font size By default 2em = 32px
But if the parent's font-size was 20px, then 2em = 40px
rem relative to the root (body's) font size of 16px 2rem = 32px usually
% relative to parent font size or dimension, can use for width or height if parent width is 300px,
then 50% = 150px
px absolute measurement (do not use for fonts) 16px = 16px

Box Model

Apply spacing to elements by manipulating the size of their "box".

Inline vs. Block

You can use the display property to set whether an element is block or inline (or something else).
Choose elements based on semantics, not appearance!

AVOID USING
float AND position PROPERTIES!

Action Items!

Monday is a holiday! There is no lecture on Monday.

But still have a lot to cover, so we can't take a day off 😭

 

With the time you would normally use for class, you'll need to read the textbook and watch the videos to learn material we would normally cover on Monday.

You are still responsible for it.

 

(We will be able to review some of it on Wednesday)

Action Items!

  • Complete task list for Week 2 (all items)

    • Problem Set 02 due tonight

    • Project Proposal due Friday

    • Finish Problem Set 03-a this week!

  • Complete task list for Week 3 (items 1-7+9)

    • Problem Set 03 due Wednesday
    • Pre-read Chapter 8 & 9 for Wed

    • Problem Set 04 due next Sunday

      • ​Need to stay on track for this!

info340wi26-css-selectors

By Tim Carlson

info340wi26-css-selectors

  • 30

More from Tim Carlson