:nth-child examples

by firegroove

HTML

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="styling.css">
<title>Examples of CSS3</title>

<body>
  <h1>First Example: List</h1>
  <div id="zob">
    <h3>SECTION 1</h3>
    <h3>SECTION 2</h3>
    <h3>SECTION 3</h3>
    <h3>SECTION 4</h3>
    <h3>SECTION 5</h3>
    <h3>SECTION 6</h3>
    <h3>SECTION 7</h3>
    <h3>SECTION 8</h3>
    <h3>SECTION 9</h3>
    <h3>SECTION 10</h3>

  </div>
  <br>

CSS

body {
  margin: 5px;
}

h1 {
  font-size: 30px;
  font-family: Helvetica, arial, sans-serif;
  padding: 20px 0px;
}

ul {
  margin: 0 0 10px 25px;
  list-style: disc;
}

#zob h3:nth-child(odd) {
  color: #0096d6;
}

#zob h3:nth-child(even) {
  color: #c0d0db;
  list-style: square;
}

table {
  width: 80%;
  margin-left: 10px;
  border-collapse: collapse;
}

.second-example td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.second-example td:first-child {
  border-left: 1px solid #dddddd;
}

.second-example td:last-child {
  border-right: 1px solid #dddddd;
}

.second-example tr:nth-child(2n+4) {
  background-color: #f3f3f3;
}

.second-example tr:last-child {
  border-bottom: 1px solid #dddddd;
}