I usually figure out any issues and fix them myself but can’t seem to figure out how to get the nth-child(n) to target the second h1:
<!-- Including Bootstrap library -->
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet">
<!-- Including Animate.css library -->
<link href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel = "stylesheet">
<!-- This is how you include the jQuery library -->
<script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
<!-- Include Bangers font -->
<link href = "https://fonts.googleapis.com/css?family=Bangers" rel = "stylesheet">
<!--Where javascript code goes -->
<script>
<!-- All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.-->
<!-- This is a function that will only run after all the HTML is loaded to prevent errors -->
$(document).ready(function() {
<!-- Just like with the btn class, we need to add the animated class first to use the classes included with it -->
$(".btn").addClass("animated bounce");
$("input").addClass("animated shake");
$("#erase-me").addClass("animated fadeOut");
$("#color-me-red").addClass("text-danger");
$("button").removeClass("btn-block");
$("p").css("color", "#3344FF");
$("p").css("font-size", "17px");
$("button").prop("disabled", true);
$("h3").html("<em>jQuery Playground</em>");
$("h2").text("Replaced");
$("#delete-me").remove();
$(".this-will-be-deleted").remove();
$("h1").removeClass("this-will-be-gone-too");
$("#move-me").appendTo("#move-me-here");
<!-- This is called function chaining -->
$("#clone-me").clone().appendTo("#send-clone-here");
<!-- The clone will not get a background-color because the green background belongs to the parent class <ol> -->
$("#clone-me").parent().css("background-color", "rgb(45, 185, 70)");
$(".container-fluid").children().css("font-family", "Bangers, Monospace");
$("h1:nth-child(2)").html("<p>This has been modified</p>");
});
</script>
<style>
.this-will-be-deleted {
color: red !important;
}
.this-will-be-gone-too {
color: red !important;
font-size: 60px;
}
</style>
<body>
<div class = "container-fluid">
<h3 class = "text-primary text-center">jQuery Playground</h3>
<h2>This is a test...</h2>
<button class = "btn btn-block btn-primary">Submit</button>
<input type = "text" placeholder = "Answer" required>
<p>Things I like:</p>
<ul id = "move-me-here">
<li>Food</li>
<li>Programming</li>
<li id = "erase-me">Work</li>
<li>Reading</li>
<li id = "color-me-red">Netflix</li>
</ul>
<button id = "delete-me" class = "btn btn-delete">Delete</button>
<div class = "row">
<div class = "col-xs-4">
<p>This text will never be seen: </p>
</div>
<div class = "col-xs-8">
<p class = "this-will-be-deleted">some text</p>
</div>
</div>
<h1 class = "this-will-be-gone-too">I should be black.</h1>
<li id = "move-me">I've been moved.</li>
<ol>
<li id = "clone-me">Clone me!</li>
</ol>
<!-- since only the <li> item is being cloned and not the <ol>, it automatically makes the clone a <ul> item -->
<p id = "send-clone-here"></p>
<!-- I need the nth-child(n) to target this -->
<h1>This has been modified</h1>
</div>
</body>