CSS Selector Intro

by Jaron Mauk

HTML

<ol class="list">
  <li>One</li>
  <li class="item">
    Two
    <ul class="list">
      <li id="normal" class="item">Three</li>
      <li class="item">Four</li>
      <li class="item tomato">Five</li>
      <li class="item">Six</li>
    </ul>
  </li>
</ol>

CSS

.list .item {
  color: green;
}

.list > .item {
  color: orange;
}

.list, .item {
  color: red;
}

.item + .item {
  color: blue;
}

.item.tomato {
  color: tomato;
}

.item:last-child, .item:first-child {
  color: purple;
}

.list > .item > .list {
  list-style: square;
  font-weight: bold;
  font-size: 2em;
}

#normal.item {
  font-style: italic;
}

#normal {
  font-weight: normal;
  font-style: normal;
}

.list:not(ul) {
  color: green;
}

/*
:nth-child(4)
*/