CSS Selectors

Joel Ross

LIS 549

In this video...

  • More types of selectors

    • Id selectors

  • Combining selectors

    • Group selectors, descendant selectors

  • How to choose a selector

CSS Syntax

List rules for formatting properties for a particular kind of element.

Rules list what values to assign to different formatting properties (variables)

Selectors tell which elements the properties apply to

/* A rule with many properties */
h1 {
  font-family: 'Helvetica';
  color: white;
  background-color: #333; /*dark gray*/
}

Selectors so far...

An element selector (or tag selector) selects all elements with a specific tag:

/* applies to all `class="highlighted"` elements */
.highlighted { 
  background-color: gold;
}
/* applies to all <p> elements */
p { 
  font-color: purple;
}

A class selector selects all elements that have a class (among others). Written by putting a . in front of the class name.

Id Selectors

Have a rule apply to only a single element by specifying that element's id attribute and then using that class as the selector in the CSS

/* CSS */
#sidebar { 
  background-color: grey;
}
<!-- HTML -->
<div id="sidebar">This div has a grey background!</div>

# specifies id name, not tag/class name

Avoid using id selectors for CSS!

Combining Selectors

You can combine any "basic" selectors by writing them next to each other (without any spaces). The rule will apply to any element that meets all the criteria.

/* selects elements that both are <p> 
 * AND have class="alert" */
p.alert {  }


/* selects elements that both are <p> AND 
 * have class="alert" AND have class="success" */
p.alert.success {  }


/* selects elements that both are have class="book"
 * AND have class="large" AMD have class="favorite" */
.book.large.favorite {  }

Group Selector

As a shortcut, you can use the group selector to write a single rule whose properties apply to multiple selectors. A group selector has a comma between selector parts.

/* Applies to <h1> elements. Also applies to <h2> elements.
 * Also applies to <h3> elements. */
h1, h2, h3 {
  color: purple;
}


/* The above rule is identical to these 3 rules, 
 * just written together (to avoid duplication) */
h1 { color: purple; }
h2 { color: purple; }
h3 { color: purple; }

Group Selector

As a shortcut, you can use the group selector to write a single rule whose properties apply to multiple selectors. A group selector has a comma between selector parts.

/* You can group together combined selectors as well!*/

/* This rule applies to both `.green` elements 
 * AND to `p.alert.success` elements */
.green, p.alert.success {
  color: green;
}

Descendant Selector

The descendant selector selects elements that are "inside" (children of) another specified element. A descendant selector has a blank space between selector parts.

/* Applies to <a> elements that are "inside" a <nav> */
nav a { ... }

/* Applies to class="alert" elements that are 
 * "inside" a <div> 
 * This is NOT <div class="alert">! */
div .alert { ... }


/* Applies to <a> that are inside a <li> 
 * that themselves are inside a <ul> */
ul li a { ... }

Descendant Selector

The descendant selector selects an element that is "descended" from another, even if there are other elements
in-between. (It selects grandkids and great-grandkids too!)

/* This will select the above <a> even though it is 
 * inside an <li>, because it has <nav> as an ancestor */
nav a { 
  color: purple;
}
<nav>
  <ul>
    <li>
      <a href="https://ischool.uw.edu">iSchool</a>
    </li>
  </ul>
</nav>

Some Other Selectors

There are a number of other selectors as well, but they aren't as common. For example:

/* Child Selector: like descendant, but only immediate kids
 * Applies to <a> elements that are *direct children* of a <nav> */
nav > a {  }


/* Adjacent Sibling Selector: selects elements that are siblings
 * Applies to <p> that are immediately after an <img>.
 * (does not apply to the <img>) */
img + p {  }


/* Attribute Selector: selects elements with certain attribute
 * There are lots of further variants of this.
 * Applies to <a href="https://example.org"> elements */
a[href="https://example.org"] {  }

If you find a selector you don't know, look it up!

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 with this tag?" If so: element selector. If not, add a meaningful class to the element and select that
  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 selector parts
  6. Use class names for styling, not id attributes