CSS 104 - Advanced selectors

When we first started learning css, we learned how to target specific elements using...

#elementId
.elementClass
p

These are great for basic styles, but often times we want even more specificity. What if we want the first element in a list not to have any margin at the top? What if we want every other element in a table to have its row highlighted? With the tools above these are things we can't do easily. Luckily, there are more advanced selectors available.

Selector Description Example Demo
, Allows you to string multiple selectors
//sets the element with id #foo and the element
//with id #bar to have a red background
#foo, #bar
  background-color: #f00
#foo foo
#bar bar
foo
bar
:first-child Applies only if the element is the first child
p:first-child
  background-color: #f00
#foo
  p This will have a red background
  p This will not
  p This will not and is jealz

This will have a red background

This will not

This will not and is jealz

:last-child Applies only if the element is the last child
p:last-child
  background-color: #f00
#foo
  p This will not have a red background
  p This will not have a red background
  p This will

This will not have a red background

This will not have a red background

This will

:nth-child(n) Applies to every child that matches the formula
p:nth-child(3)
  background-color: #f00
#foo
  p This will not have a red background
  p This will not have a red background
  p This will
  p This will not have a red background
  p This will not have a red background
  p This will not have a red background
  p This will not have a red background

This will not have a red background

This will not have a red background

This will

This will not have a red background

This will not have a red background

This will not have a red background

This will not have a red background

:nth-child(n) Applies to every child that matches the formula
We can also use the variable n to do every nth element
p:nth-child(3n)
  background-color: #f00
#foo
  p This will not have a red background
  p This will not have a red background
  p This will
  p This will not have a red background
  p This will not have a red background
  p This will
  p This will not have a red background

This will not have a red background

This will not have a red background

This will

This will not have a red background

This will not have a red background

This will

This will not have a red background

:nth-child(n) Applies to every child that matches the formula
The formula can also include addition and subtraction
p:nth-child(3n + 1)
  background-color: #f00
#foo
  p This will
  p This will not have a red background
  p This will not have a red background
  p This will
  p This will not have a red background
  p This will not have a red background
  p This will

This will

This will not have a red background

This will not have a red background

This will

This will not have a red background

This will not have a red background

This will

[attribute] If the element has an attribute described (regardless of the value) apply the style
p[id]
  background-color: #f00
#foo
  p This will not have a red background
  p This will not have a red background
  p#blah This will
  p#asdf This will
  p This will not have a red background

This will not have a red background

This will not have a red background

This will

This will

This will not have a red background

[attribute=value] If the element has an attribute equal to the value given, apply the style
input[type=checkbox]
  outline: 3px solid #f00
#foo
  input(type='text')
  input(type='checkbox')  <-- red
  input(type='radio')
:hover Apply the style only if the mouse is hovering over it
#foo
  background-color: #f00
#foo:hover
  background-color: #0f0
#foo
:focus Apply the style only if the element is in focus
input#foo:focus
  border: 3px solid red
input(type='text')
input#foo(type='text')
+ Apply the style on the second element only if it follows the first in the same parent element
h2 + p
  border: 3px solid red
p I do not have an h2 before me
h2 I am an h2
p I do have an h2 before me

I do not have an h2 before me

I am an h2

I do have an h2 before me

" " Apply the style on the second element if it is a child of the first element
.foo div
  margin-left: 15px
.foo
  div I have my own indentation
    div I do not :(
div Neither do I 
I have my own indentation
I do not :(
Neither do I
> Apply the style on the second element if it a direct child of the first element
.foo > div
  margin-left: 15px
.foo
  div I have my own indentation
    div I do not :(
div Neither do I 
I have my own indentation
I do not :(
Neither do I

Now to practice these head over to the selectors excercise.