Help ! Can't pass the Basic CSS: Use Attribute Selectors to Style Elements challenge

HTML-CSS
1

Hello all,

I don’t understand what I’m doing wrong.
The challenge is to give the checkboxes a top margin of 10px and a bottom margin of 15px.

My code:
[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}

I tried it the longhand way (margin-top and-bottom), but it won’t work either.

The output of the test:
“The top margins of the checkboxes should be 10px.”
“The bottom margins of the checkboxes should be 15px.”

???
EDIT: here’s all the code. Sorry, I’m new to this :slight_smile:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;

  [type='checkbox'] {
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
2

Mind using the “” when posting a code with a link to the lesson?
you can just press the button ask for help next time as well :3

1 Like
3

What browser are you using?

Without seeing all of the code it is hard to say if something else is wrong. Select all the code inside the code editor and then edit your post, press the </> button and paste the code where it says

type or paste code here
1 Like
4

Thaks, I’m new to this :slight_smile:

5

I’m using Chrome.
I tried a couple days later, this time it worked… with the same code.

I edited my post, and will keep your comments in mind next time.
Thanks !

6

Hello you are using attribute selector and it should read as follow:
input[type=“checkbox”] { CSS Rule Here}

7

Looks like it’s the browser problem…

%E5%9C%96%E7%89%87
%E5%9C%96%E7%89%871920×1020 240 KB

%E5%9C%96%E7%89%87
%E5%9C%96%E7%89%871920×1020 245 KB

8

what’s the browser that giving issues? if you open the browser console for that browser and then run tests what appear in the console?

9

There is a missing closing bracket for .silver-background class

3 Likes
10

omg thank you ! :heart_eyes:
It worked after I reset the code… I must have erased it by mistake :frowning: