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
Diane Stukes
126 PointsUsing Attribute Selectors with an Unordered List
I am trying to utilize attribute selectors with my unordered list but it is not working. I did get an error from Visual Studio Code about an empty selector but I ignored it since I had not created the declaration yet at that time. After I finished the code, it did not work in the web browser. Here's the code:
HTML
<h3>My Favorite Ice Cream Flavors </h3>
<li top-favorite>Vanilla</li>
<li>Rum Raisin</li>
<li top-favorite >Fudge Chocolate</li>
<li top-favorite>Egg Nog</li>
<li>Pistachio</li>
CSS
li[top-favorite]{
color: hotpink;
font-weight: bold
}
Results in all black text instead of top favorites highlighted in pink.
5 Answers
Jonathan Tawk
5,878 PointsHello Diane, it doesn't work because you need to put :
- a selector or an ID.
Plus, you need the HTML :
- <ul> element (represents an unordered list of items).
You can try this :
HTML part :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<title>Example</title>
</head>
<body>
<h3>My Favorite Ice Cream Flavors </h3>
<ul>
<li class="top-favorite">Vanilla</li>
<li class="top-favorite">Rum Raisin</li>
<li class="top-favorite">Fudge Chocolate</li>
<li class="top-favorite">Egg Nog</li>
<li class="top-favorite">Pistachio</li>
</ul>
</body>
</html>
CSS part in your style.css for example :
.top-favorite {
color: hotpink;
font-weight: bold;
}
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsI made a codepen with your code and it seems to work. Is there more HTML and CSS being applied than you're showing here? How are you loading the CSS onto the page? Is it possible to share it in it's current state somehow (Github, Treehouse Workspace snapshot, Codepen, etc).
One debugging strategy could be opening up the dev tools and seeing if your CSS is being applied.
Also, it would probably be best to wrap your <li> items in a <ul> tag, but not necessary to solve the problem at hand.
Brandon Robitaille
14,078 PointsHi Diane,
Try adding class selectors to you "top-favorite" items in your HTML like this:
<li class="top-favorite">Vanilla</li> <li class="top-favorite">Fudge Chocolate</li> <li class="top-favorite">Egg Nog</li>
and select them in your CSS like this:
li.top-favorite { color: hotpink; font-weight: bold }
Good luck!
Diane Stukes
126 PointsHi Guys, First I want to thank all of you for answering me so quickly. That means so so much to me. You all just made me even more glad I am a member of treehouse!
I realized the two mistakes that I made. My apologies for not pasting in all of the code. I was looking for a way to upload a snippet but didn't notice one. First, I made the laughable mistake of leaving out my link statement in the Head section of my HTML that would have linked it to my CSS. I had been performing multiple tests did not realize that it was not in that file. Secondly, it seemed to work once I removed the "li" notation before the attribute selector [topfavorite]. Once I addressed those two issues it worked. Also, I tested with dashes in the custom data attribute: [top-favorite] and it still worked. But it was so awesome to see your supportive help. If I had not figured it out at least I know the treehouse community is truly responsive!
One of you said it worked as is, but I am not sure why. I would be happy to post a complete snippet but I am a bit embarrassed to say that I don 't see how to do so. Previously, I ended up pasting in the raw code when my SnagIt pic wouldn't take. Please advise. Thanks.
(By the way, I was specifically testing out the custom attribute selector using the data attribute. I was already comfortable with using classes and IDs, and was trying to explore more flexibility in selection. Thanks again.)
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsOne option is to use Treehouse Workspaces. Click the "New +" button, choose the "Static" environment, add your files, then click the camera icon to take a "snapshot" which will give you a shareable link.
The tool I used was CodePen to make this snapshot of the code you posted. But codepen kind of cheats and doesn't require you to link your CSS to your HTML, so in this case it didn't address the issue.
Eventually, you'll need to get up to speed with git and Github. This is how code is typically shared between developers, but there's a learning curve, and it's fine to use other options for the time being.
Diane Stukes
126 PointsHi Brendan, thank you so much. You are absolutely right. I do need to practice using Git and Github more. I do have some projects posted in Github but need to do more. I did follow your instructions and obtained a link. I see others are actually posting large snippets. That is what I am trying to do. Thanks.