jQuery reverse selection
HTML
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="container">
<h1>Forms</h1>
<form id="user-registration">
<input type="hidden" value="1" name="id" />
<fieldset>
<h2>Basic Details</h2>
<input type="text" name="username" placeholder="username" />
<input type="text" name="email" placeholder="email address" id="email-field" />
<select name="favorite">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</fieldset>
<fieldset class="basic">
<h2>Basic Details</h2>
<input type="date" name="birthdate" />
<input type="submit" value="submit" />
</fieldset>
</form>
<table>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
</table>
<div class="footer">
<p>copyright</p>
</div>
</div>
CSS
table{
border:1px solid #666;
}
th{
background-color:#666;
color:#fff;
}
td {
background-color:#f9f9f9;
padding:2px;
}
#container{
border:1px solid #ccc;
padding:5px;
border-radius:5px;
}
fieldset{
outline:none;
border:1px solid #666;
border-radius:5px;
padding:5px;
margin:0 0 5px 0;
}
.footer ul p{
display:inline;
}
.footer > p{
text-align:center;
font-size:10px;
color:#999;
}
td:nth-child(2) {
font-style:italic;
}
JavaScript
// What element(s) will this selection fetch?
//
// Write in, in plain english, what element(s) will match
//
// For example:
//
// $("p");
// // All paragraphs
//
// We'll go through them together to check our answers
$("h1");
$("#container").fadeOut('slow');
$(":input");
$(".basic :input");
$("div:last");
$(".footer");
$("td:nth-child(3)");
$("tr:odd td");
$("#user-registration h2");
$("input[name='email']");
$("select option[value='blue']");
// gear shift
$("input", "fieldset");
$("p", ".footer");
var form = $("form");
form.find("fieldset");
var inputs = $("input");
inputs.filter("[type='text']");
$("fieldset.basic").filter("h2");