Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Selectors : Select Nested Elements

Sometimes the element you want to select is nested inside of other elements. When this is the case you need to "drill down" to get to the desired item. To do this you simply list all of the elements that come before it with a space between each one.

When you think of nested elements - think of this orange box that you could store your mobile phone in to protect it from the outside elements while hiking. In order to get to the phone, you would need to open the box. In CSS code you would write the name of the outer element then a space and then the name of the nested element. So in this case you would write:


orangeBox mobilePhone{brand:iphone}

Element Name Selectors

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

RESULTS

results of selecting nested elements in css

NOTE

Reading the CSS you will see that the plain image tag (img) has a dark orange border around it and that it has a border radius of 20px which almost makes it look like a circle. So every image on the website would have this style unless that image is nested inside of another tag that has a different definition as with the main and aside images.

When you need to select an image that is nested inside of another element you first write out the name of the element then a space then the name of the element nested inside.

So just like above you had a mobile phone inside of an orange survival box, you have an image inside of the main element and another image inside of an aside element.

When thinking of nested elements - remember this:

orangeBox mobilePhone{brand:iphone}

main img{border:solid 2px black;}


Do you believe you understand how to select nested elements? If yes, hit the next button below and continue learning more about CSS.

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