Estoy tratando de hacer que una sola celda (denominada 1A) en esta tabla tenga un color de fondo separado anulando el CSS. También he intentado usar !important , pero no consigo que aparezca el color de fondo. Funciona cuando uso funciones para cambiarlo en JavaScript, pero no cuando trato de apuntarlo directamente en 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; } Además, estoy usando addEventListener("keydown") para escuchar las pulsaciones de teclas de caracteres "b", "o" e "y" para cambiar los colores de fondo de las celdas en JavaScript. ¿Se recomienda "keydown" para esto? ¿Por qué cuando traté de usar "presionar tecla" no funcionó?
Código completo: https://codepen.io/Lukedoc321/pen/powRRMW?editors=1111
Es HTML5 válido tener una identificación que comience con un dígito pero no CSS.
Por lo tanto, funciona en JavaScript pero no desde una hoja de estilo.
Para seleccionar ese elemento en CSS, puede seleccionar a través del atributo id. [id="1A"]
Su problema es comenzar su identificación con un número.
deberías reemplazar
<p id="1A" onclick="selectSquare(this.id)">1A</p>con
<p id="oneA" onclick="selectSquare(this.id)">1A</p>y en tu cambio de archivo css
#1A { background-color: red; }a
#oneA { background-color: red; }y debería funcionar.
Podría, con bastante facilidad, eliminar los atributos de ID por completo y confiar en el event para determinar en qué celda se hizo clic y colorearla de acuerdo con la pulsación de tecla detectada.
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>