PuzzleWeb
.ru
Learn HTML
Learn CSS
CSS tutorial
>
CSS pseudo-classes and links
> Pseudo-classes :first-child and :last-child
Pseudo-classes :first-child and :last-child
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> div p:first-child { color: green; } div p:last-child { color: blue; } </style> </head> <body> <div> <p>The first child paragraph of the div element, it will be displayed in green.</p> <p>The second child paragraph of the div element, it will be displayed in black, because there are no rules for it.</p> <p>The third child paragraph of the div element, it is also the last child paragraph. The text color will be blue.</p> </div> </body> </html>
Result:
Edit the code listed above and click the "GO" button to view the result.