Some time ago, I was helping someone on SitePoint forums make a product comparison page, where a user could select multiple products, click a button and be presented with the relevant product specs. The person I was helping had already built the page and the products were marked up as list items (
<li> elements) in an unordered list.
My initial solution was to add a hidden
*headdesk* I can’t even… no, sorry. I can’t. Do people actually make code like this?
“A bit harsh,” I thought, but inquiring as to what the problem was, revealed a much neater solution I had overlooked completely. Namely, to add a checkbox and a label to each
<li> element, then to use the adjacent sibling selector (