everything you wanted to know about css selectors

Jim on Jan 28

resources

• overview : MDN Selector (CSS)
• MDN tutorial
  • simple : type, class, id
  • attribute
  • pseudo-classes
  • combos & lists
• MDN : a css exercise <=== practice !
• full spec : W3 selectors level 3 (Feb 2018)
• codepen playground

background

First, you need to understand that an HTML document is made of

• tags (i.e. h1, p, img, ...) ; those names are called "types" of tags.
• Those tags embedded within each other, forming a tree. Within the tree, some tags are "siblings", others are "children".
• Each tag may have "attributes" which may may have "values".

Here's a short snip of HTML with all of that: tags with types "div", "p", attributes "source", "id", "class", forming a tree with siblings and children.

<div source="Jim">
  <p class="title">This might be the title of the stuff.</p>
  <div class="important">
    <p>This is the first line, eh?<p/>
    <p id="secondline">Oh, and this is the second line.</p>
    <p class="title">Another title !??</p>
    <p class="important">Why would you want to put a title there?</p>
  </div>
</div>

div
|   \
p    div
    / | | \
   p  p p  p

Each part of a css specification has two parts : a selector, and a body with "properties" and "values".

#secondline {
    color: red;
    margin: 2em;
}

The selector is the leading part, before the curly braces. It describes a subset of the tags in the document ... in several tricky ways.

The syntax of selectors is

• a bare word (i.e. "p") refers to all tags that match that type
• a word with a "." before it (i.e. ".title") refers to a "class" i.e. all tags with that class.
• a word with a "#" before it (i.e. "#secondline") refers to an id - there should only be one of those in the document.
• a word with "[]" around it (i.e. "[source]") picks all tags that have that attribute.
• a word with "[]" and an "=" (i.e. "[source='Jim']") picks the tags which have that attribute and that value.
• a word which starts with ":" (i.e. ":hover") picks tags which have some special property ... like the mouse is hovering over it. (There is a long-ish list of reserved words that can come after the colon.)

And you can combine selectors in several ways.

First, selectors right after each other mean that both must match

p.title       a "p" tag with class "title"
.foo.bar      a tag which has class "foo" and class "bar", i.e. <div class="foo bar">
img[alt]      image tags which have an "alt" attribute
a:hover       a link that the mouse is hovering over

Second, selectors with commas mean that the styles apply to all.

h1, p        type "h1" or "p"

Third, selectors with spaces between mean that the second is "a descendant of" the first, i.e. somewhere inside.

div span     matches a "span" which is within a "div", e.g. <div><p><span>this matches</span></p></div>

And finally, there are several other binary infix operators besides those three :

• A > B matches any B that is a "direct child" of A
• A + B matches any B which is the "next sibling" of A
• A ~ B matches any B which is a sibling after A, i.e. follow A somewhere and has the same parent.

example

Here's a short example on codepen :

<!-- It's some html, eh? -->
<div copyright="cc-by-jim">
  <p class="title">This might be the title of the stuff.</p>
  <div class="importnt">
      <p>This is the first line, eh?<p/>
      <p id="secondline">And this would be the second line.</p>
      <p class="title">Another title !??</p>
      <p class="importnt">Why would you want to put a title there?</p>
  </div>
  <p style="color:green">Mouse over me ...</p>
</div>

/* It's some css, eh? */

#secondline {
  color: darkred;
  margin-left: 2em;
}

.title {
  font-weight: bold;
  font-size: 1.5em;
}

p:hover {
  color: blue;
}

p.importnt {
  font-family: sans-serif;
}

div.importnt {
  background: #ccc;
  border: solid 1px green;
}

[copyright] {
  padding: 0.5em;
  background: #eef;
}

Quick quiz: mousing over most of the paragraphs turns the text blue ... but not the last one. Why not?

Are we having fun yet?

aside

• Ask HackerNews: Is it just me or is CSS too damn hard? (today)