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
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"]
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.
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>