36pixels Posted June 26, 2012 Share Posted June 26, 2012 (edited) 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?? Edited June 27, 2012 by 36pixels Link to comment Share on other sites More sharing options...
eTianbun Posted June 26, 2012 Share Posted June 26, 2012 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 More sharing options...
dsonesuk Posted June 26, 2012 Share Posted June 26, 2012 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 More sharing options...
ShadowMage Posted June 26, 2012 Share Posted June 26, 2012 mind you i am on pain killers so could be me.Must be you (or your magical browser ) because FF does not highlight anything (as expected). Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2012 Share Posted June 26, 2012 I tried that and it's not highlighting anything. Which browser did you test in? Link to comment Share on other sites More sharing options...
eTianbun Posted June 26, 2012 Share Posted June 26, 2012 No highlighting! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 26, 2012 Share Posted June 26, 2012 forget it, tested it in old version 5 FF, i use older version to check difference, v5 highlighled 2nd h1, v6, v12 shows nada Link to comment Share on other sites More sharing options...
36pixels Posted June 27, 2012 Author Share Posted June 27, 2012 (edited) Hi disonesuk,I think this will work - nth-of-type(2){background:#ff0000;} But like you I also wonder why nth-cild doesn't work here!!Anyone has any explanation to these? Edited June 27, 2012 by 36pixels Link to comment Share on other sites More sharing options...
36pixels Posted June 27, 2012 Author Share Posted June 27, 2012 (edited) 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 June 27, 2012 by 36pixels Link to comment Share on other sites More sharing options...
Ingolme Posted June 27, 2012 Share Posted June 27, 2012 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. 1 Link to comment Share on other sites More sharing options...
eTianbun Posted June 27, 2012 Share Posted June 27, 2012 ...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. 1 Link to comment Share on other sites More sharing options...
eTianbun Posted June 27, 2012 Share Posted June 27, 2012 See also: 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. 1 Link to comment Share on other sites More sharing options...
36pixels Posted June 27, 2012 Author Share Posted June 27, 2012 Ya I already expected thee answer. I realized that body is the parent here and all other are childs!! Thanks all of you. Topic is closed Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now