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
Abson Chifodya
11,817 PointsCreate an attribute selector that targets img elements with a title attribute value of "avatar". Give the elements a bor
Create an attribute selector that targets img elements with a title attribute value of "avatar". Give the elements a border radius of 50%.,Can someone assist on what i am supposed to do.
/* Complete the challenge by writing CSS below */
img {
:
}
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<form class="form-contact">
<img src="avatar.png" title="avatar" alt="">
<label for="un">Username:</label>
<input type="text" id="un">
<label for="pw">Password:</label>
<input type="password" id="pw">
<input type="submit" value="Sign up">
</form>
</div>
</body>
</html>
8 Answers
Gertrude Dawson
5,371 PointsI did this problem numerous times. My preview of my code worked perfectly every time except the first time when I used 50px instead of 50%. It kept marking my code as incorrect because I had a space in it it didn't like. This is the thing that is holding me back in coding. It finally accepted my code when I went to treehouse community and removed the space.
Thea Partin
8,750 PointsI had the same exact problem!!
Rachel Nielson
4,484 PointsI had that same problem. Really frustrating.
victor E
19,145 PointsAfter reading this I figured it out, the issue was the space between "title" and the "=" sign.
juvenile
1,508 Pointsimg[title="avatar"] { border-radius: 50%; }
Travis Batts
4,031 PointsSo essentially here your targeting the img element and then selecting the title attribute with the value of "avatar". "<img src="avatar.png" title="avatar" alt="">"
So something like this...
img[title="avatar"] { border-radius: 50%; }
Alex Stanley
Front End Web Development Techdegree Student 6,400 PointsAlso, here is a great Treehouse resource that clarifies all CSS Selectors. It's a bit more stream-lined than MDN's selector page. Just be aware, you'll need to use "" marks when selecting things like
img[alt="avatar"]{}
The examples, for some reason, don't include these.
Sebastian Prentice
6,677 Pointsimg[title="avatar"]{ border-radius: 50%; }
watch out for the space between img and [
zagros baban
1,057 Pointsimg[title="avatar"]{
border-radius:50%;
}
Mercedes Aker
6,544 Pointsimg [title="avatar"] { border-radius: 50%; }
Can someone tell me what is wrong with what I did above? It doesnt accept my answer.
Kudakwashe Jama
7,676 Pointsimg[title="avatar"] { border-radius: 50%; }
Marcin Lipski
9,947 PointsMarcin Lipski
9,947 PointsMake sure you do not add space after img element, so your code should look like this - img[title="avatar"] {border-radius:50%;} - Good luck!