Jump to content

nth-child do not work for value 1


36pixels
 Share

Recommended Posts

I found this code in w3schools for nth child-

<!DOCTYPE html><html><head><style type="text/css">p:nth-child(2){background:#ff0000;}</style></head><body><h1>This is a heading</h1><p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p><p><b>Note:</b> Internet Explorer does not support the :nth-child() selector.</p></body></html>

My question is, why this line-

p>The first paragraph.</p>

assigned the 2nd child and why not the value=1?If I replace the code

p:nth-child(2){background:#ff0000;}

with the code-

p:nth-child(1){background:#ff0000;}

it doesn't color the line -"The first paragraph". Why is this anamoly?IThe above line should be the first child or n=1,isn't it?? :Pleased:

Edited by 36pixels
Link to comment
Share on other sites

You are using:

nth-child(2)

which assign value to any <p> element, that is the 2nd child of it parent. <h1> was the first child, while

<p >...first paragr...</p>

was the 2nd child. If you want to target any 2nd <p> element, of its parent, use:

nth-of-type(2)

Link to comment
Share on other sites

It seems the 'try it' example at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child is a bit.... put gently not providing correct result that it should, try this below in it

<!DOCTYPE html><html><head><style type="text/css">h1:nth-child(2){background:#ff0000;}</style></head><body><h1>This is a heading</h1><p>The first paragraph.</p><p>The second paragraph.</p><h1>This is a heading</h1><p>The third paragraph.</p><h1>This is a heading</h1><p>The fourth paragraph.</p><p><b>Note:</b> Internet Explorer does not support the :nth-child() selector.</p></body></html>

IT should not highlight anything, but it highlights 2nd h1????? mind you i am on pain killers so could be me.

Link to comment
Share on other sites

Hi CodeName,You replied

assign value to any <p> element, that is the 2nd child of it parent. <h1> was the first child
.But here the parent element is the <p> tag and so accordingly
<p>The first paragraph.</p>

will be the first child i.e. nth-child(1),and

<p>The second paragraph.</p>

.How can <h1> be a child of <p>??Plz explain to me.How come you take <h1> as a child of the <p> tag?? I dont understand at all your explanation is not OK!!Please see that the parent element is <p> tag and not <h1> tag in my posted code.

p:nth-child(2){background:#ff0000;}

Lastly can you tell me who is the parent here?

Edited by 36pixels
Link to comment
Share on other sites

p:nth-child(2) refers to the <p> element that is the second child of its parent. The parent is <body>, the first child is an <h1> element and the second child is a <p> element.

  • Like 1
Link to comment
Share on other sites

...How come you take <h1> as a child of the <p> tag?? I dont understand at all your explanation is not OK!!Please see that the...
Not ok? How did you know it's not ok? The parent element, is the <body> tag, while <h1> is the first-child of <body> tag, so the first <p> is the 2nd child of <body> and the the 2nd <p>, is the third child of <body>, etc.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...