Why is my background color in CSS not being overrided? Also, why is "keypress" not working but "keydown" is?

Question

I'm trying to make a single cell (referred to as 1A) in this table have a separate background color by overriding the CSS. I've tried using !important as well, but I just can't get the background color to show up at all. It works when I use functions to change it in JavaScript, but not when I try to directly target it in CSS.

p {
    background-color: white;
    max-width: 100%;
    height: 100%;
    display: table-cell;
    border: 10px solid pink; 
    padding: 50px;
    text-align: center;
}

#1A {
    background-color: red;
}

Also, I'm using addEventListener("keydown") to listen to character keystrokes "b", "o", and "y" to change the background colors of cells in JavaScript. Is "keydown" recommended for this? Why when I tried to use "keypress" did it not work?

Full code: https://codepen.io/Lukedoc321/pen/powRRMW?editors=1111

The id selector is invalid, selectors must not start with a number. — Teemu, Sep 08 '21 at 07:35
[Identifiers starting with numbers are not accepted in css either](https://stackoverflow.com/questions/45293534/css-class-starting-with-number-is-not-getting-applied) — JavaScript, Sep 08 '21 at 07:37
JS and HTML5 are happy with ids starting with a number but CSS is not. — A Haworth, Sep 08 '21 at 10:17

score 1 · Answer 1 · answered Sep 08 '21 at 07:49

Your problem is starting your id with a number.

You should replace

 <p id="1A" onclick="selectSquare(this.id)">1A</p>

with

 <p id="oneA" onclick="selectSquare(this.id)">1A</p>

and in your css file change

#1A {
    background-color: red;
}

to

#oneA {
    background-color: red;
}

and it should work.

score 1 · Answer 2 · answered Sep 08 '21 at 07:51

You could, quite easily, remove the ID attributes entirely and rely upon the event to determine which cell was clicked and colour it according to keystroke detected.

let selection;

document.querySelectorAll('row.usr p:not([id])').forEach(p=>p.addEventListener('click',function(e){
  selection=e.target;
}));

window.addEventListener('keydown', function(event) {
  let colour='white';
  if (event.keyCode === 66) { //listening for "b" keystroke
    colour='blue';
  } else if (event.keyCode === 79) { //listening for "o" keystroke
    colour='orange';
  } else if (event.keyCode === 89) { //listening for "y" keystroke
    colour='yellow';
  }
  selection.style.backgroundColor=colour;
});

body {
  max-width: 560px;
  margin: auto;
  background-color: white;
}

.table {
  display: table;
  margin: 50px 0 50px 0;
  border: 10px solid pink;
  border-radius: 20px;
  box-shadow: 0 0 75px black;

}

row {
    display: table-row;
}

p {
    background-color: white;
    max-width: 100%;
    height: 100%;
    display: table-cell;
    border: 10px solid pink; 
    padding: 50px;
    text-align: center;
}

#1A {
    background-color: red;
}

<div class="table" id="reservation_table">
  <row class='usr'>
    <p id="redSelector" style="background-color:red;">1</p>
    <p>1A</p>
    <p>1B</p>
    <p>1C</p>
  </row>
  <row class='usr'>
    <p id="blueSelector" style="background-color:red;">2</p>
    <p>2A</p>
    <p>2B</p>
    <p>2C</p>
  </row>
  <row class='usr'>
    <p id="greenSelector" style="background-color:red;">3</p>
    <p>3A</p>
    <p>3B</p>
    <p>3C</p>
  </row>
  <row>
    <p></p>
    <p style="background-color:red">A</p>
    <p style="background-color:red">B</p>
    <p style="background-color:red">C</p>
  </row>
</div>

That said - the `row` tag is a new one on me.... I don't believe that is a valid HTML tag — Professor Abronsius, Sep 08 '21 at 07:54
I wouldn't even say that is `"standard"` - never encountered that before today — Professor Abronsius, Sep 08 '21 at 14:54
Is there a `row` tag then? Please enlighten me as I can find no reference to one — Professor Abronsius, Sep 09 '21 at 17:14
[User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.](https://html.spec.whatwg.org/multipage/infrastructure.html#extensibility-0). Tho I would not recommend doing it, it does not make it invalid. — JavaScript, Sep 10 '21 at 06:16

score 1 · Accepted Answer · answered Sep 08 '21 at 10:16

1

It is valid HTML5 to have an id starting with a digit but not CSS.

Hence it’s working in JavaScript but not from a stylesheet.

To select that element in CSS you can select via the id attribute.[id="1A"]

answered Sep 08 '21 at 10:16

A Haworth

30,908
4
11
14

Md. Asaduzzaman · Answer 4 · 2021-09-08T07:49:55.320

-1

you should know CSS priority- -id has less priority than element. http://tutorials.jenkov.com/css/precedence.html Use this: style="background-color:red;

edited Sep 08 '21 at 07:49

answered Sep 08 '21 at 07:44

Md. Asaduzzaman

1
2

It's not correct, due the cascade the id in this case overwrite the element, the problem is that the selectors can't start with a number – Sfili_81 Sep 08 '21 at 07:51
Thanks for the link though, I'll give it a read! – Lukedoc321 Sep 09 '21 at 01:03

Why is my background color in CSS not being overrided? Also, why is "keypress" not working but "keydown" is?

4 Answers4