Use Attribute Selectors to Style Elements help

Curriculum Help HTML-CSS
#1

Tell us what’s happening:
Anyone know how to do this?

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;
  }
</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 10.0; 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 are given an example on how to do css styling by type:

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

This does type “radio” and gives it that styling.

The instructions say:

Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.

OK, so instead of “radio” it will be “checkbox” and we need to change the margins. You do that, and put it in between your style tags, you should be golden.

#3

I tried like this
input[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
but its not work…

#4

You may notice that the example doesn’t have the word “input” in it.

#5

[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
but sir… this one also not working…

#6

When I cut and paste your code into the problem, putting it inside the style markers, it’s on my line 30 … When I do that, it fails. It looks like there are “smart” or curly quotes. JS doesn’t like those. When I replace those with “dumb” or straight quotes, it works.

#7

Untitled
Untitled1920×1080 389 KB

its still not working sir…

#8

Hey, the problem is with your cut and paste thing from example.

you can write the attribute selector in either way ie

input[type="checkbox"] (or) [type="checkbox"] both will target the same element checkboxes.

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

1 Like
#9

The code is not working because you have to manually update the

’

in your challenge. Type these on your keyboard, not to copy and paste.

#10

i typed it… but still same sir… its not working

#11

Then there’s a cache issue, please copy the url link of that challenge and paste in different browser and try again.
or
Please clear the cache of the existing browser, you can do ‘Hard clear’ in chrome refresh, then try again.

#12

Acutally we can use input.

#13

OK, sorry, CSS isn’t my strength. I was just looking for differences. I also don’t know enough about the testing to know if it is evaluating based on what is written or by its effects.

OK, your answer looks good to me. Try this exact code, cut and paste:

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

Other than that, as others have mentioned. Try a different browser. Sometimes you get weird caching issues. Clear the browser cache, try it on a different browser, reboot, try a different computer, etc.

#14

trying on different browsers also now working…

#15

try this instead of " margin: 10px 0px 15px 0px;"
it worked with me.

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

#16

i tried… not working sir…

#17

I have also issue with this challenge and tried everything that was suggested here.

#18

Clear the caches and cookies of your browser as suggested, it will work!
Mine worked just now!! :slight_smile:

2 Likes
#19

Hey Sara, you’re a hero for this!:sunglasses: FCC Needs to remind everybody to occasionally clear their browsers cache or else it’ll break FCC.

#20

@imabdulmalik I was experiencing the same issue and found out its in the wording make sure it says checkbox and not checkboxes.

[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
This will work if not I’m not sure why because it works for me and I even added the “checkbox” and it still worked with that one too. :wink: