CSS stylesheet: style for one button specifically

Question

this is my HTML code:

<button name='q1.button1' id='q1.button1' onclick='incorrect()' </button>

and this is my CSS file:

.q1.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

i also tried:

#q1.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

but none of them work, the button is just a big white box!

i thought there could be a problem with the HTML so I tried the following and it worked:

Button {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

however, i cant use this because each button has to be different but this will change all buttons

Escape your dot using `\.`. Dot is used in CSS for classes. – m1k1o Mar 11 '20 at 20:55 — m1k1o, Mar 11 '20 at 20:55

score 3 · Answer 1 · answered Mar 11 '20 at 21:02

Special characters need to be escaped in CSS:

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

This site will escape them for you https://mothereff.in/css-escapes

FYI, if you want to target the name attribute you would have to do this:

[name="q1.button1"] {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

score 2 · Accepted Answer · answered Mar 11 '20 at 21:01

The button is not closed properly. The CSS needs a backslash in front of the dot. 3 minutes too slow. @WOUNDEDStevenJones mentioned it in the comments.

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

<button name='q1.button1' id='q1.button1' onclick='incorrect()'> Cool Button </button>

score 1 · Answer 3 · answered Mar 11 '20 at 21:03

Remove the dot from the 'id' attribute

Don't

<button name='q1.button1' id='q1.button1' onclick='incorrect()' </button>

Try this:

<button name='q1.button1' id='q1button1' onclick='incorrect()' </button>

Css:

#q1button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

score 1 · Answer 4 · answered Mar 11 '20 at 21:04

Your button has an id of "q1.button1", not a class! So, replace the leading dot in your CSS selector by a hash (#).

Also, what is messing things up is that you have a dot (.) in your ID name, and dots are a special character in CSS to designate class names.

Therefore, either use an ID name without a dot in it, or escape the dot with a backslash (\).

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

<button name='q1.button1' id='q1.button1' onclick='incorrect()'> </button>

CSS stylesheet: style for one button specifically

4 Answers4