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 Thomas Hewitt
Thomas Hewitt
17,691 Points

Border radius, img [title="avatar"] question is saying I'm wrong even though I've added 50% to the border radius?

Hi everyone, I've added the following code:

img [title="avatar"] { border-radius: 50%; }

However the system keeps telling me that I'm wrong and that I need to make sure that I set the border radius to 50%.

I'm super confused so if anyone could help me with what I'm doing wrong that would be amazing.

Thanks.

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

andren
andren
28,558 Points
andren
andren
28,558 Points

The issue is that you have a space between img and [title="avatar"], that turns the selector into a descendant selector which targets elements with a title of "avatar" that are descendants of img elements. Rather than a selector which specifically targets img elements with a title of "avatar" like the task is asking for.

So by simply removing that space like this:

img[title="avatar"] {
  border-radius: 50%;
}

Your code will pass. This is a mistake that is pretty common when people start out with CSS. If you want selectors to be combined (in this case combining a tag selector and an attribute selector) they have to be mashed together without a space.

Thomas Hewitt
Thomas Hewitt
17,691 Points

Amazing, thank you for your help Andren. You've saved me from having to frown at my screen for a few hours. Annoying thing is, I know all about descendant selectors and things like that, I just wasn't marrying the two things up in my head so thank you for your help with this. I was able to smash the rest of the challenge after this.