CSS CSS Selectors Selectors - Beyond the Basics Attribute Selectors Challenge

Thomas Hewitt
Thomas Hewitt
17,145 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,468 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,145 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.