Help with nth-child(n)

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>

Is it the h1 that says “This has been modified”? If so, there are at least a couple of different options. One that would work is h1:nth-of-type(2).

Another selector that would work is h1:last-child, but if you add something after the last h1, I don’t think it would work because that h1 will no longer be the last child.

This page https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 is a good reference for CSS selectors. Hope that helps!

2 Likes

nth-child index count every children in the parent, so… in your example you have to use body h1:nth-child (13) for the second h1. Btw, you can follow the advice of @nacla01 :wink:

1 Like

Still a little confused because in the tutorial on here he uses:
$(".target:nth-child(2)").addClass(“animated bounce”);
and it targets two different targets to be animated.
And I tried adding the:
$("h1:nth-of-type(2)").html("<p>This has been modified</p>");
and it still did not change the html.

Can you make a codepen or jsfiddle example?

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like

Ok, this is what I found.

You should use h1:nth-of-type(2) if you want to target the second <h1> element. To target only that of the <div class="container-fluid">, you’ll want to change it to .container-fluid h1:nth-of-type(2) (or add your own class/id and use that instead).

h1:nth-child(2) will only match an <h1> that is the second child of some parent element. Like

<div class="some-container">
  <p>Hi there!</p>
  <h1>h1:nth-child(2) will see me, because I'm the second child.</h1>
  <h1>Nope, I won't be seen :P </h1> <!-- If you used `h1:nth-of-type(2)` this will be matched instead -->
</div>
1 Like

I did a lot of digging and then testing on my own because I still could not get the code to work and I figured out it’s a problem with this:

$("h1:nth-of-type(2)").html("<p>This has been modified</p>"); 

When I change it to a paragraph it does not change it to the same CSS properties that my other paragraph elements have. I changed the <p> tags to <em> tags to see if the sentence would at least change and it did so I guess I would have to go about it another way to have it also inherit <p> properties.

By the way, thanks, Kevcomedia. Wasn’t sure how to properly embed the code on here.