Basic CSS - Use Attribute Selectors to Style Elements

Basic CSS - Use Attribute Selectors to Style Elements
0

#1

I did this but I’ve no idea why isn’t this selecting all the checkboxes.

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

Link to the challenge : Basic CSS - Use Attribute Selectors to Style Elements


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

Try changing this line:

 input[type = 'checkbox']

to:

  input[type='checkbox']

I think this may be down to the way the tests are being run, as I tried the syntax with spaces on w3schools.com and it worked fine.

Hope this solves your probem :slight_smile:


#3

Man, this isn’t fair :frowning_face:
what’s the difference in between the space and that was proper indentation :frowning_face:


#4

It might just be a styling choice. All of the examples that I looked at were without spaces


#5

Thank you guys for your references!!

This code passes as well. Hope this can help other people


input[type='checkbox']{
    margin: 10px 0px 15px 0px;
  }

#6

I guess now they’ve changed their tests :joy::joy::joy:


#7

I have done exactly this but it’s not working… Am I doing something wrong here?

Could you tell me where exactly are you inserting this code?

I have inserted it as the last class within the element.

Why is it not working?

I am getting this error:
image


#8

If you shared your code possibly someone would spot your problem.

Based on your errors it would appear that your selector is correct but you have not applied the margin styles correctly.

You should not need to create any classes for elements. Possibly that is the source of your error.


#9

No the error was something else. I’ve already found it and fixed it. It was spotted by some users on this thread.

Thanks for your reply.