What Html markup for a focusable TD?

Question

I want to practive, and even best-practice, with Html+JS+CSS. I use a one page client-only Sudoku page. My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).

My requirements :

1. Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
2. Navigate through cells with arrow keys (plus Home etc).
3. type-in an integer value sets that value to the currently focused cell

I use an input button inside each cell. The Javascript works fine.

My only problem is with the display. When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.

I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :

input:focus '?? how to go up ??' td { background-color:yellow;

I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying. Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !

I already searched this site for answer, I found close but distinct questions and answer.

I'm hoping someone could help improve my page ... and my markup skill :-)

Answer 1

It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.

Basically you have two options to choose from:

• Try to fill the td with the input completely using height and width rules in your css.

• Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.

Answer 2

Could you not use a dash of jQuery to set a .focused class and then apply some style to it?