CSS stylesheet: style for one button specifically [duplicate]

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
– m1k1o

2020-03-11 20:55:47 +00:00
Commented Mar 11, 2020 at 20:55 — m1k1o
– m1k1o, Commented Mar 11, 2020 at 20:55

Ted Whitehead · Accepted Answer · 2020-03-11 21:02:03Z

3

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');
}

answered Mar 11, 2020 at 21:02

Ted Whitehead

1,82611 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rawnewdlz · Accepted Answer · 2020-03-11 21:01:40Z

2

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>

answered Mar 11, 2020 at 21:01

rawnewdlz

1,2731 gold badge18 silver badges25 bronze badges

Comments

RafaelB13 · Accepted Answer · 2020-03-11 21:03:41Z

1

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');
}

answered Mar 11, 2020 at 21:03

RafaelB13

1933 silver badges15 bronze badges

Comments

Anis R. · Accepted Answer · 2020-03-11 21:04:31Z

1

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>

answered Mar 11, 2020 at 21:04

Anis R.

7,0022 gold badges17 silver badges44 bronze badges

Collectives™ on Stack Overflow

CSS stylesheet: style for one button specifically [duplicate]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related