Problem with CSS: "Use Attribute Selectors to Style Elements" Exercice

HTML-CSS
1

Tell us what’s happening:

Hi,

I can’t figure out where I must type the [type=‘radio’] tag. In the CSS or within the radio form itself for each checkbox?By default I put it in the CSS section but it doesn’t work

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='radio'] {
    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.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0.

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

2

Are you sure that it doesn’t work? It works flawlessly here, adding a little extra space around the radio buttons.
And yes, the attribute selectors are CSS selectors so they are used just like any other CSS selector in the stylesheet – so you’ve put the rule in the right place. :slight_smile:

3

Well your problem is that the lesson isn’t asking you to style radio type elements :joy: It’s actually asking you to style checkbox elements. You probably already know what to do but in case you don’t within your <style> tags change [type=“radio”] to [type=“checkbox”] <3

4

Damn, I didn’t check the question itself. Fail… :stuck_out_tongue:

5

I do it all the time :joy:

1 Like
6

If you think my reply was the solution could you mark it as it? (button next to like button) It just lets people know that your thread is answered and you don’t need help anymore, and also people looking for a solution to their problem will know they can come to this thread <3