Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Selectors : Child Selectors

When you have a list of items that are grouped with a "wrapper" then the items inside of the wrapper are called children. You can target the first-child, last-child, or the nth-child. Examples of these grouped items include bullet lists and items wrapped in a named div tag.

In the demonstration provided in the body below, you will learn how to select a child from a list. Remember you can select child elements not just in a bullet list but also in any other list of items wrapped in a container.

How many children do you have? It doesn't really matter! Don't let having small children keep you from learning to code! Get them their own tent and take them camping with you. Then you can practice writing code after they fall asleep!

child contained inside of a tent

Photo created by: Tatiana Syrikova

Selecting Child Elements

HTML

select child elements html code

CSS

select child elements css code

RESULTS

select child elements html code

NOTES


In this example, an image is used for the background of a div container and then text is added to the inside of the box and positioned so that the text does not overlay the graphic of the computer monitors.

How To Select Child Elements

After you watch the video on targeting multiple elements in CSS, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I know how to target multiple CSS elements". But if you still don't understand something, please write that in your comments too. (4 minutes)

No matter how many children you have, you can select them as either your first-child, last-child or refer to them as an nth-child and put a number in parenthesis to note the order in which that child belongs in the list. Practice selecting items using the child selector method.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved