 first-child |
  |
| pinklemon |
 Sep 20 2014, 01:57 PM
Post
#1
|
|
Advanced Member  Group: Members Posts: 140 Joined: 29-June 14 Member No.: 21,166  |
Hello!
Please, what is actually the first-child? How would be the clear definition the average beginner woudl understand? many thanks! This post has been edited by pinklemon: Sep 20 2014, 01:58 PM |
  |
 
|
| pinklemon |
Sep 20 2014, 02:01 PM
Post
#2
|
|
Advanced Member Group: Members Posts: 140 Joined: 29-June 14 Member No.: 21,166 |
Here I do not seee anything really NESTED: , should I:
http://www.w3schools.com/css/tryit.asp?fil...ss_first-child1 CODE <!DOCTYPE html> <html> <head> <style> p:second-child { color: blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html> This post has been edited by pinklemon: Sep 20 2014, 02:02 PM |
|
|
|
| pandy |
Sep 20 2014, 03:24 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(pinklemon @ Sep 20 2014, 08:57 PM)  Hello! Please, what is actually the first-child? How would be the clear definition the average beginner woudl understand? many thanks! The spec is actually very clear about this. The :first-child pseudo-class matches an element that is the first child element of some other element. http://www.w3.org/TR/CSS2/selector.html#first-child So in the example both Ps are children of BODY and the first P turns blue. |
|
|
|
| pandy |
Sep 20 2014, 03:27 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(pinklemon @ Sep 20 2014, 09:01 PM) Here I do not seee anything really NESTED: , should I: http://www.w3schools.com/css/tryit.asp?fil...ss_first-child1 CODE <!DOCTYPE html> <html> <head> <style> p:second-child { color: blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html> Depends on what you mean with nesting. The Ps are contained in BODY and the the B is contained in the last P. You could call that nesting I suppose. AFAIK there's nothing called second-child. You can do what you want but it's called :nth-child() and is written as below. It's CSS3 though, so browser support may vary. CODE p:nth-child(2) { color: blue; } http://www.w3.org/TR/css3-selectors/#nth-child-pseudo |
|
|
|
| Frederiek |
Sep 20 2014, 04:36 PM
Post
#5
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
The nth-child pseudo-class is rather well supported> See http://caniuse.com/#search=nth-child .
And to the OP, go read http://www.456bereastreet.com/archive/2005...lectors_part_3/ . |
|
|
|
| pinklemon |
Sep 21 2014, 11:42 AM
Post
#6
|
|
Advanced Member Group: Members Posts: 140 Joined: 29-June 14 Member No.: 21,166 |
Many thanks all! It will do for now!
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 03:24 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC