katherineschultz · October 30, 2013 02:37
diff --git a/jsbin.OFivuZA.css b/jsbin.OFivuZA.css
 h2::first-letter {
  font-size: 2em;
 }

 h3 + p {
  border-top: 3px dotted #bbb;
 }

 ul:nth-of-type(2) li:nth-child(3n) {
  color: red;
 }

 ul:nth-of-type(2) > li {
  list-style-type: none;
 }

 ul:nth-of-type(3) li {
  border-bottom: 2px solid green
 }

 ul:nth-of-type(3) li:last-child {
  border-bottom: none;
 }

 li[class*="frank"] {
  background-color: yellow;
 }

 input[type=checkbox]:checked + label {
  background-color: blue;
  color: white;
 }

 input[type=checkbox] {
  display: none;
 }
diff --git a/jsbin.OFivuZA.html b/jsbin.OFivuZA.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  
 <h2>Challenge #1</h2>
  
  <p>
    Each of these can be accomplished with <b>one rule</b>. You may not edit the HTML file at all or use CSS classes.
  </p>
  
  <ul>
    <li>Make the first letter of every H2 twice the size</li>
    <li>Give every p that follows an H3 a top dotted gray border.</li>
    <li>Make every third item in the candy list red.</li>
    <li>Remove the bullet on all first-level candies, but keep them for the fun-size.</li>
    <li>Give every monster but the last one a bottom green border.</li>
    <li>Every monster with "frank" in its name should have a yellow background.</li>
  </ul>
  
  
 <h3>Candy</h3>
  
 <p>A list of my favorite candies.</p>
  
 <ul class="candy">
  <li>Caramel apples</li>
  <li>Candy corn</li>
  <li>Lollipops</li>
  <li>Pixie sticks</li>
  <li>Pudding</li>
  <li>Choco Taco</li>
  <li class="fun-size">Fun size chocolates:
    <ul>
      <li>Snickers</li>
      <li>Hershey's</li>
      <li>Krackel</li>
      <li>Butterfingers</li>
    </ul>
  </li>
 </ul> 
 
  <p>Which ones do you like?</p>


 <h3>Monsters</h3>
  
 <p>A list of my favorite costumes.</p>

  <ul class="monsters">
  <li class="frankenstein">Frankenstein</li>
  <li class="bride-of-frankenstein">Bride of Frankenstein</li>
  <li class="dracula">Dracula</li>
  <li class="the-blob">The Blob</li>
  <li class="frank-the-mosquito">Frank the Mosquito</li>
  <li class="mothra">Mothra</li>
 </ul> 
  
  <p>Who are you going as?</p>

  <hr>
  
 <h2>Challenge #2</h2>

 <div>
  When you click a label or the checkbox, this should happen: the labels should recieve a background color of blue and a text color of white.  Once you get it working, try hiding the checkboxes and retaining the same functionality. Use this <a href="http://s3.amazonaws.com/production.lanternhq.com/attachments/files/000/001/166/original/checkboxes.png">image</a> as a guide.
 </div> 

 <br>
 <form action="#">
 <div>
  <input type="checkbox" id="apple" value="1">
  <label for="apple">Apple</label>
 </div>  

 <div>
  <input type="checkbox" id="pumpkin" value="1">
  <label for="pumpkin">pumpkin</label>
 </div>

 <div>
  <input type="checkbox" id="cherry" value="1">
  <label for="cherry">cherry</label>
 </div>
 </form>
  
    
  </div>
 </body>
 </html>
	h2::first-letter {
	font-size: 2em;
	}

	h3 + p {
	border-top: 3px dotted #bbb;
	}

	ul:nth-of-type(2) li:nth-child(3n) {
	color: red;
	}

	ul:nth-of-type(2) > li {
	list-style-type: none;
	}

	ul:nth-of-type(3) li {
	border-bottom: 2px solid green
	}

	ul:nth-of-type(3) li:last-child {
	border-bottom: none;
	}

	li[class*="frank"] {
	background-color: yellow;
	}

	input[type=checkbox]:checked + label {
	background-color: blue;
	color: white;
	}

	input[type=checkbox] {
	display: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	<h2>Challenge #1</h2>

	<p>
	Each of these can be accomplished with <b>one rule</b>. You may not edit the HTML file at all or use CSS classes.
	</p>

	<ul>
	<li>Make the first letter of every H2 twice the size</li>
	<li>Give every p that follows an H3 a top dotted gray border.</li>
	<li>Make every third item in the candy list red.</li>
	<li>Remove the bullet on all first-level candies, but keep them for the fun-size.</li>
	<li>Give every monster but the last one a bottom green border.</li>
	<li>Every monster with "frank" in its name should have a yellow background.</li>
	</ul>


	<h3>Candy</h3>

	<p>A list of my favorite candies.</p>

	<ul class="candy">
	<li>Caramel apples</li>
	<li>Candy corn</li>
	<li>Lollipops</li>
	<li>Pixie sticks</li>
	<li>Pudding</li>
	<li>Choco Taco</li>
	<li class="fun-size">Fun size chocolates:
	<ul>
	<li>Snickers</li>
	<li>Hershey's</li>
	<li>Krackel</li>
	<li>Butterfingers</li>
	</ul>
	</li>
	</ul>

	<p>Which ones do you like?</p>


	<h3>Monsters</h3>

	<p>A list of my favorite costumes.</p>

	<ul class="monsters">
	<li class="frankenstein">Frankenstein</li>
	<li class="bride-of-frankenstein">Bride of Frankenstein</li>
	<li class="dracula">Dracula</li>
	<li class="the-blob">The Blob</li>
	<li class="frank-the-mosquito">Frank the Mosquito</li>
	<li class="mothra">Mothra</li>
	</ul>

	<p>Who are you going as?</p>

	<hr>

	<h2>Challenge #2</h2>

	<div>
	When you click a label or the checkbox, this should happen: the labels should recieve a background color of blue and a text color of white. Once you get it working, try hiding the checkboxes and retaining the same functionality. Use this <a href="http://s3.amazonaws.com/production.lanternhq.com/attachments/files/000/001/166/original/checkboxes.png">image</a> as a guide.
	</div>

	<br>
	<form action="#">
	<div>
	<input type="checkbox" id="apple" value="1">
	<label for="apple">Apple</label>
	</div>

	<div>
	<input type="checkbox" id="pumpkin" value="1">
	<label for="pumpkin">pumpkin</label>
	</div>

	<div>
	<input type="checkbox" id="cherry" value="1">
	<label for="cherry">cherry</label>
	</div>
	</form>


	</div>
	</body>
	</html>