Question about this topic: Basic CSS: Use Attribute Selectors to Style Elements

Question about this topic: Basic CSS: Use Attribute Selectors to Style Elements
0
#1

Hi,

I wonder what is wrong with this. When I run this code, its says:“The type attribute selector should be used to select the checkboxes.” I checked an example on this forum from previous discussion chain, which did same as I, but still this code does not work.

Fort margins I also tried:

margin: 10px 0px 15px 0px

So here is the code as a whole:

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

The margin part seems to be right, because it shows green answer for these:
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.

1 Like

#2

Sorry, I found the answer and got it right by deleting the input word from one part. If somebody knows, why does deleting the input word make so big difference?

I mean choosing this:

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

instead of this version:

input[type ='checkbox'] {
      margin-top: 10px;
      margin-bottom: 15px;
    }
1 Like

#3

Hello. Thanks for asking this question. Could anyone please help me find a solution for this test??

What I found here doesn’t seem to be working for me.

I keep getting the following error:

// running test
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.
// tests completed

image

Thanks in advance!

0 Likes

#4

Ok, guys, was racking my brain to find solution to this. And all it was, was a matter of whitespace. Not that it should matter in actual coding, but for the system to accept it, make sure not to put any spaces in your
attribute selector.
[type=‘checkbox’] {…}

1 Like

#5

it should be like this [type=‘checkbox’]{
margin:10px 0px 15px 0px;

0 Likes

#6

yeah i was wondering why does space like a big deal in this cases ,

0 Likes

#7

The extra whitespace doesn’t matter in CSS, but it does for the challenge because the tests are looking for that exact string in the CSS, and won’t tolerate any extra whitespace in them. Hopefully the next version of FCC’s curriculum will use more robust tests that use regexes and not exact string matches, but in the meantime we have to work with what’s in place now.

0 Likes