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 Kim Dallas
Kim Dallas
11,461 Points

what am I doing wrong?

I'm stuck on this one

style.css 
/* Complete the challenge by writing CSS below */
a[img avatar] 
.border=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

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

So the goal here is to get the picture's border-radius to be 50%, which is round. First of all, your selectors are off. Here are the basics again:

// To select a class we use: 
 .classname

// To select ID we use:
#idname

// To select tags we just write the tagname :
body 

//To select attributes we write them like so: [attribute="value"]
a[src="asdf.com"] //Will apply styles to all anchorelements with the src="asdf.com"

in our case here, you want the image, we can use both src and avatar here So you would like to select it like so : img[title="avatar"] {}

What you're doing is saying "Hey! Browser! i want the img-element with an attribute "title" with the value of "avatar" to recieve these styles!"

so you write your selector, then you have curly-braces which the styles will then go into

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

If there's something you're not clear on, just comment again and i'll try to explain as best i can Happy coding!

Kim Dallas
Kim Dallas
11,461 Points

thank you. I tried your suggestion. now it's stuck on the border radius. it is set to 50%