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 CSS Selectors Selectors - Beyond the Basics Attribute Selectors Challenge

Posted by Ian Shou
Ian Shou
1,191 Points

is this proper syntax for border-radius? border-radius:50%; I can't figure out what I'm doing wrong in this challenge.

The challenge question is this: Create an attribute selector that targets img elements with a title of avatar, then assign those elements with a border radius of 50%

this is what I typed: img [title="avatar"] { border-radius:50%; }

but I get an error saying "Make sure you are assigning a border radius of 50%"

What am I doing wrong??

style.css 
/* Complete the challenge by writing CSS below */
img [title="avatar"] {
  border-radius:50%;
}
index.html 
<!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>

1 Answer

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

You have a space after img, but there should not be. Your code should look like this: 

img[title="avatar"] {
  border-radius:50%;
}
Ian Shou
Ian Shou
1,191 Points

thanks Emma… I was actually sorta wondering about that… odd, cuz most other (including CSS) coding syntax ignores white spaces. But thanks for getting back to me, and so quickly!

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

A lot of coding does ignore spacing, but there are times where it is important. For css, when you put a space between selectors, the space acts as a descendant selector. So with the space, it would have been trying to find an element with the title avatar nested inside of an image tag.