CSS : using attribute selectors to style element

HTML-CSS
1

Hello guys! i don’t understand why they told me that i didn’t do the top and bottom margin for checkboxes even if i did them…
Any solutions please…
Here’s the code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  [type='checkbox'] {
      margin: 10px 0px 15px 0px;
  }
  .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" type='checkbox'>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="https://freecatphotoapp.com/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>
2

@mehdimasmar Can you write the CSS code clearer? Because I can’t see clear.

1 Like
3

i removed ‘<’ so you can see it clearly
style>
[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
.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>

4

Is it this?

5

what about now ? :sweat_smile:

6

I am sorry but can you post the challenge link?

1 Like
7

of course , one moment please :

8

Please check the value of type in checkboxes.
your type in the

[type=‘checkboxes’] {}

should be checkbox
Hope this Help and sorry for asking many question. :laughing:

1 Like
9

I did it it’s doesn’t work neither … when i run my code they accept only the first task which is :“The ‘type’ attribute selector should be used to select the checkboxes” but the margin doesn’t work… I tried to write margin-top and margin-bottom doesn’t work too … i guess it’s a bug or something
Anyway thank you so much for your time :smile: :raised_hands:

10

@mehdimasmar Copy from the code that you write. Then paste it. Then check for something that could wrong(for me I never remember to put ;). If it still not working here

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

omg doesn’t work it’s definitely a bug from the system itself

12

Try it again later. If still the same when you try again, click the Get Help or send email to Sir Quincy here.

1 Like
13

Okey , Thanks again and sorry for bothering you :sweat_smile: :sweat_smile:

14

Oh no you are not bothering me. I am now free and searching some problems which I can solve in forum.freecodecamp.org.

1 Like
15

https://forum.freecodecamp.org/u/quincylarson/summary the link to Sir Quincy click the Message button to message to him.

1 Like
16

Okeyy thank youu :smile: :raised_hands:

1 Like
17

@mehdimasmar,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
18

@mehdimasmar, you made a change to the sample code that is causing the tests to fail.
The sample code had this line;
<h2 class="red-text">CatPhotoApp</h2>
and you changed it to
<h2 class="red-text" type='checkbox'>CatPhotoApp</h2>

That is why the test fails. If you reset the code and only add the code needed in the style element the tests will pass.

Also, in the future;

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
19

Thank you so much for help ! it works

1 Like
20

Glad to have helped you.
Happy coding!

1 Like