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 Hristo Krassimirov
Hristo Krassimirov
22,654 Points

can you help me with some CSS?

Here is the surce of the web i am making. I have some inline <style> tags that i must eliminate and put it on the .css file instead. But i am not able to target them succesfully.

So here is the surce : view-source:http://www.cocomascoco.com/cocococo.html

On line 29 is the first <a href="cocococo.html"> element that i need to target.

Then the <ul> tag that is just after the <a href="nosotros.html"> that has the style=list style:none;

Can you help me targeting those elements?

I have tried with :child selectors but with no success.

Thanks in advance

4 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Hi Hristo,

Kevin Dang is right. If you have access to the HTML code, the best way to go about adding styles to specific elements would be to give them an ID or class.

If you don't have access to the HTML, Colin McGraw has the right idea. For your specific code you'd need a combination of child selectors, and direct descendant selectors as he pointed out.

For your code specifically, to target the anchor tag with the value of "Nosotros," and its unordered list sibling, these two selectors should be what you're looking for:

ul.art-vmenu > li:nth-child(2) > a {
    /* Selects the Nosotros anchor tag */
}

ul.art-vmenu > li:nth-child(2) > ul {
    /* Selects the unordered list */
}
Hristo Krassimirov
Hristo Krassimirov
22,654 Points

Thank you very much Kevin! that is what i needed beacause i could not use ID or classes.

Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

I think the direct descendant selector would be useful 

/*target top level list items only */
.art-vmenu > li {
}
/*target sub menus only */
.art-vmenu > ul {
}

Some more detailed info - css-tricks.com/child-and-sibling-selectors/

Hope that helps!

Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points
Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points

hi Hristo Krassimirov

i think thats imposible to do it just by inspecting your source. we need to see some code in order to help you. post some code here so somebody may help you.

Kevin D
Kevin D
8,646 Points
Kevin D
Kevin D
8,646 Points

Would you not assign the ul tag with an id or class and then target it inside the CSS file?

Or is this a bad way of doing it?