How to use ntn:child selector properly

HTML-CSS
1

Hi

I’m having difficulty figuring out how to use the :ntn-child(n) element selector.

I want to select the following h1 element with heading class so I can apply different styles each h1 element.

Here’s my HTML.

<section class="intro">
	<div class="container">
		<div id="title">
			<h1 class="heading">Welcome</h1>
			<h1 class="heading">To</h1>
			<h1 class="heading">Manila</h1>
		</div>
	</div>
</section>

Here’s my CSS (SCSS)

#title:ntn-child(1) {
	color: red;
}

I already tried selecting first the .container then title:ntn-chid(1) with the > child selector like describe below

.container > #title:ntn-child {
	color: red;
}

But it doesn’t work either. I also did this following approach.

.container {
	#title:ntn-child {
		color: red;
	}
}
2

nth-child() is correct

3

Thank you for answering my question. but this isn’t working on my codepen :frowning:

4

Even when you changed it to be spelled correctly? Because I took your brief HTML sample and pasted it into codepen, then took your first CSS sample and pasted it in and changed the n to h and the color of the header changed to red.

Paste a link to your codepen please.

5 
.heading:nth-child(1) {}

.heading:nth-child(2) {}

.heading:nth-child(3) {}

You are selecting an element which is the nth child of some parent (and you need to specify what n is).

6

I just want to point out that you should only use one h1 for a single section of your page. If you want to style multiple items in that h1 you can use inline tags like span.

1 Like
7

Noted. Thank you for the tip. @jnmorse :slight_smile:

@Roma here’s my pen. BTW you are right I also tried my code using VS Code and it worked perfectly fine.

https://codepen.io/samplesage/pen/bJvLXK

@DanCouper the n is just a sample value but in my code I use 0~9 values.

1 Like
8

codepen has validators for HTML, CSS, and JS. Click on the arrow in the upper right of each section and click on the respective ‘Analyze’ link.

In the CSS section it gives this error for line 63;
Unexpected unknown pseudo-class selector ":ntn-child" (

That’s what I initially said, :ntn-child() is incorrect, it should be :nth-child()

9

I got it. Thank you all :smiley:

1 Like
10

CSS is 1-indexed, there isn’t a zeroth child, it has to be 1+

1 Like