Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

css selectors

How to select the anchor element?

<div class="nav">
      <nav>
        <a href="/Project_1/index.html">Home</a>
        <a href="/Project_1/photos.html">Photos</a>
        <a href="/Project_1/contact.html">Contact</a>
        <nav>
    </div>

4 Answers

Grady Taylor
Grady Taylor
3,897 Points

Hello Matas

If you want to select an anchor tag inside multiple <div> elements then you can use 

div.container nav a {
/*apply styles here*/
}

This will select anchor tags specifically inside the div containers. If you need to go through more divs simply add them like this

div.wrapper div.container nav a {
/*apply styles here*/
}

What happens here is the file will run through the nodes in the DOM until it reaches its target element which is the anchor tag

div.wrapper --> div.container --> nav --> a

Note - do not add commas in between selections, this will apply styles to those individually.

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

There is a lot of way to do that i write few of them, but you learn about it in future CSS course called SELECTORS :)

a {

}

div nav a {

}

div > nav > a {

}

nav + a {

}

#nav a {

}

a[href*="index"] {

}

..... and a lot of moreeeee

znzlcrstkk
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points
znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

But in my index.html there is more divs with other classes like <div class="container"> </div> how to work around it?

Patrik Horváth
Patrik Horváth
11,110 Points

as i sayd a lot of moreee and it desnt metter if you select DIV with class you selecting DIV

Class 

.classname a {
}

.classname > a {
}

.classname + a {

}

.classname ~ a {
}

#tagID > a

..................... and a lot a lot of more you have 2,6K points in CSS you should already know it

znzlcrstkk
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points
znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

Thank you Grady