CSS Selectors

Alessia S. Fitz Gibbon

INFO 340

In these slides...

  • More types of selectors

    • Id and Class 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 <p> elements */
p { 
  font-color: purple;
}
/* CSS */
#sidebar { 
  background-color: grey;
}

An ID selector selects the element with a specific ID:

<!-- HTML -->
<div id="sidebar">This div has a grey background!</div>

Avoid using ID

Selectors!

Why?

  1. There are almost always better choices
  2. Overusing ID selectors can easily lead to putting a unique ID on every single element.
  3. ... And when a web page/site gets sufficiently big, every element has its own styles that are similar, but ever so slightly different from some other element's styles.
  4. All of this quickly leads to development errors and headaches!

Class Selectors

<!-- HTML -->
<div class="big_text">This div's text content is big!!</div>
<div class="big_text">And so is this one's!!</div>

. specifies class name

/* applies to all `class="highlighted"` elements */
.big_text { 
  font-size: xx-large;
}

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

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>

... More Selectors

/* 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