Use Attribute Selectors to Style Elements?

HTML-CSS
1

Tell us what’s happening:

Your code so far


<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='checkboxes']{
    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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements

2

You’re given an example:

[type='radio'] {
margin: 20px 0px 20px 0px;
}

The above example shows how to use a radio button style selector. Notice how we define it to look for “radio” type buttons. If you look in the code you can easily identify these buttons because they have type=“radio” in their tags.

For the challenge you need to do the same thing but for a checkbox. You’ve tried but you’ve said you want to style “checkboxes”. Does the code have anything with type=“checkboxes” ? Think about it…

3

input [type=‘checkbox’]{
margin-top: 10px;
margin-bottom: 15px;
}
changed it already …but it doesn’t work after that changes

4

Instead of “checkboxes” write “checkbox”.
you can try writting it this way:
input[type=‘checkbox’]{
margin-top: 10px;
margin-bottom: 15px;
}

1 Like
5

What they want is:
[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}

Your way is not wrong, but the testing on FCC is very specific to the instructions so I would stick with the instructions (and the given example) as much as possible to pass these challenges.

2 Likes
6

hi there im following the example but is not working

7

please post your code by clicking on the ‘get help’ button in the challenge

8

Hi @mani2

‘checkbox’ 'checkbox' can you notice the difference between the quotes, thats the problem it should be this ' '