JavaScript CSS Selectors Quickstart CSS Selector Basics Attribute Selectors Challenge

Vanessa Pajarito
seal-mask
.a{fill-rule:evenodd;}techdegree
Vanessa Pajarito
Full Stack JavaScript Techdegree Student 3,097 Points

I'm not sure what I'm doing wrong with selecting an image element with "avatar" as the value of title

I'm not sure why my code is being marked as incorrect. The picture icon also looks like its being affected correctly.

style.css
/* Complete the challenge by writing CSS below */
img[title = "avatar"] {
  border-radius: 50%; 
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <form class="form-contact">
        <img src="avatar.png" title="avatar" alt="user">

          <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">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
</html>

1 Answer

Steven Parker
Steven Parker
207,987 Points

The challenge doesn't like the extra spaces in the attribute portion of the selector. Remove them and you'll pass:

img[title="avatar"] {
Matt Jones
Matt Jones
7,447 Points

Nope, I've just been having the same problem and haven't been using the spaces from the beginning?

Steven Parker
Steven Parker
207,987 Points

I tried copying your code and pasting it directly into the challenge, and when I removed the extra spaces, it passed.