Targeting HTML elements in CSS

Hi,

I have always straggled when it comes to target a nested element, in other words I’m always confused if the element I’m trying to target is buried inside other elements.

Is there an easy way to understand this concept and easily target any element?

Thanks

How would you target btn1, btn2 etc…
<div id=“page-wrap”>
<ul id=“nav”>
<li ><a id = “btn1” href=“/”>Home</a></li>
<li ><a id = “btn2” href=“/maps/”>Maps</a></li>
<li ><a id = “btn3” href=“/journal/”>Journal</a></li>
<li ><a id = “btn4” href=“/history/”>History</a></li>
<li ><a id = “btn5” href=“/references/”>References</a></li>
<li ><a id = “btn6” href=“/contact/”>Contact</a></li>
</ul>
</div>

You can either target the ID directly by using #btn1 { code here } or you can roll down the list by naming each component in order such as… div ul li #btn1 { code here }, you could even start mid-way and use something like #nav li #btn1 { code here }. The general rule with targeting is to either point the CSS directly at an element (such as using classes or ID’s) or you can roll down the cascade by having space separated names (of elements, ID’s or, classes) with kids after the parent :slight_smile:

Thanks a lot!

you mean like this:

#page-wrap ul#nav li a #btn1 ?

“Selects any element with an id attribute that equals btn1 that is a descendant of an a element that is a descendant of a li element that is a descendant of an ul element with an id attribute that equals nav that is a descendant of any element with an id attribute that equals page-wrap.”

this can help you

Thanks a lot!