This CSS test isn't working. Any idea why?

(The test in question:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/)

Hi. This question has already been brought up, here, but I have no choice but to ask this question again, because the solutions presented aren’t working for me.

@ FCC Forum admins:

If the solution presented is correct, then why is the test giving out an error??

The code I am presenting as the solution is as follows (it has worked for other users, NOT WORKING FOR ME):

<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;

input [type='checkbox'] {
  margin: 10px 0px 15px 0px;
}
</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>

The error I am getting:
// running test
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.
// tests completed

Here’s a pic:
image

Am I doing something wrong here, or is the problem in the test itself???

I would appreciate any help. Thanks in advance!

At first glance, it looks like a missing closing curly brace could be the problem. Check your CSS just before the checkbox margin code. I’ll try it out myself, too.

Hope that helps!

Hi @joelac32 thanks for your reply, but as you can see the curly bracket is not missing… it’s on the upper line.

Yep, @joelac32 is right about a missing curly brace (the closing curly brace for .silver-background is missing). Also be careful with spaces in CSS selectors. input [type='checkbox'] (with a space after input) is very different from input[type='checkbox']

2 Likes

I was referring to the lack of a closing curly brace of your .silver-background CSS. However, I copied your code, added the curly brace and it still didn’t work. The problem is actually that you don’t need “input” before your attribute selector. If you look at the example, you’ll notice it only includes the attribute selector.

1 Like

Thanks @kevcomedia I used your solution and it worked. The problem is in the default code. One of the developers forgot to close the curly brackets. Thanks!

There doesn’t seem to be any missing bracket in the default code. All of them are in place when the page loads and after I hit the Reset button

@joelac32 thank you! Yes, you were right I didn’t notice that closing curly bracket after .silver-backgroung . But for me it worked with input [type='checkbox'] as it is.

Thank you all for such quick replies, I appreciate it.

I can say now that this question is closed.

1 Like

Maybe you’re right. For me the default code was without curly brackets I think, but I didn’t try to reset code.

the closing curly braces is missing in the class .silver-background.
Must have been missed by the developers hope this helps

I used double quotes around checkbox and it worked:

[type=“checkbox”]{
margin: 10px, 0px, 15px, 0px
}