<main>
	<h1>Grocery List</h1>

	<form action="">
		<label>Filter by category:</label>
		<select>
			<option value="">No filter</option>
			<option value="condiments">Condiments</option>
			<option value="dairy" selected>Dairy</option>
			<option value="fruit">Fruit</option>
			<option value="meat-protein">Meat/Protein</option>
			<option value="produce">Produce</option>
		</select>
	</form>

	<table border="1">
		<thead>
			<tr>
				<th>#</th>
				<th>What</th>
				<th>Category</th>
			</tr>
		</thead>
		<tbody>
			<tr data-type="fruit" hidden>
				<td>1</td>
				<td>Apples</td>
				<td>Fruit</td>
			</tr>
			<tr data-type="fruit" hidden>
				<td>2</td>
				<td>Bananas</td>
				<td>Fruit</td>
			</tr>
			<tr data-type="dairy">
				<td>3</td>
				<td>Butter</td>
				<td>Dairy</td>
			</tr>
			<tr data-type="produce" hidden>
				<td>4</td>
				<td>Carrots</td>
				<td>Produce</td>
			</tr>
			<tr data-type="meat-protein" hidden>
				<td>5</td>
				<td>Charcuterie</td>
				<td>Meat/Protein</td>
			</tr>
			<tr data-type="dairy">
				<td>6</td>
				<td>Cheese</td>
				<td>Dairy</td>
			</tr>
			<tr data-type="meat-protein" hidden>
				<td>7</td>
				<td>Chicken</td>
				<td>Meat/Protein</td>
			</tr>
			<tr data-type="dairy">
				<td>8</td>
				<td>Eggs</td>
				<td>Dairy</td>
			</tr>
			<tr data-type="meat-protein" hidden>
				<td>9</td>
				<td>Fish</td>
				<td>Meat/Protein</td>
			</tr>
			<tr data-type="produce" hidden>
				<td>10</td>
				<td>Garlic</td>
				<td>Produce</td>
			</tr>
			<tr data-type="condiments" hidden>
				<td>11</td>
				<td>Honey</td>
				<td>Condiments</td>
			</tr>
			<tr data-type="dairy">
				<td>12</td>
				<td>Milk</td>
				<td>Dairy</td>
			</tr>
			<tr data-type="produce" hidden>
				<td>13</td>
				<td>Onions</td>
				<td>Produce</td>
			</tr>
			<tr data-type="fruit" hidden>
				<td>14</td>
				<td>Oranges</td>
				<td>Fruit</td>
			</tr>
			<tr data-type="condiments" hidden>
				<td>15</td>
				<td>Pepper</td>
				<td>Condiments</td>
			</tr>
			<tr data-type="produce" hidden>
				<td>16</td>
				<td>Potatoes</td>
				<td>Produce</td>
			</tr>
			<tr data-type="condiments" hidden>
				<td>17</td>
				<td>Salt</td>
				<td>Condiments</td>
			</tr>
			<tr data-type="meat-protein" hidden>
				<td>18</td>
				<td>Steak</td>
				<td>Meat/Protein</td>
			</tr>
			<tr data-type="meat-protein" hidden>
				<td>19</td>
				<td>Tofu</td>
				<td>Meat/Protein</td>
			</tr>
			<tr data-type="condiments" hidden>
				<td>20</td>
				<td>Vinegar</td>
				<td>Condiments</td>
			</tr>
			<tr data-type="dairy">
				<td>21</td>
				<td>Yogurt</td>
				<td>Dairy</td>
			</tr>
		</tbody>
	</table>
</main>

<footer>
	<p>Demo for <a href="https://developer.chrome.com/articles/css-nth-child-of-s" target="_top">https://developer.chrome.com/articles/css-nth-child-of-s</a></p>
</footer>
@layer base, layout;

tr:nth-child(even) {
  background: lightgrey;
}










@layer layout {
	@layer main {
		main {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		main > * {
			margin-top: 0;
			margin-bottom: 0;
		}

		form {
			background: #fafafa;
			padding: 1rem;
			border: 1px solid #ccc;
		}
	
		footer {
			text-align: center;
			font-style: italic;
		}
	}
	
	@layer table {
		thead {
			background: #333;
			color: #fff;
			text-align: left;
		}
		
		th, td {
			padding: 0 0.5rem;
		}
		col.wide {
			width: 100%;
		}
	}
}



/* Non-demo styles below */
@layer base {
	@layer reset {
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
		}
		html, body {
			min-height: 100%;
		}
		ul[class], ul[class] > li {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
	@layer layout {
		html {
			max-width: 84ch;
			padding: 3rem 2rem;
			margin: auto;
			line-height: 1.5;
			font-size: 1.25rem;
		}

		a,
		a:visited {
			color: blue;
		}
		

		summary {
			cursor: pointer;
		}

		dd + dt {
			margin-top: 0.5em;
		}

		button {
			cursor: pointer;
		}
	}
	
	@layer code {
		pre {
			border: 1px solid #dedede;
			padding: 1em;
			background: #f7f7f7;
			font-family: "Courier 10 Pitch", Courier, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 4;
		}
		
		code:not(:is(pre, .no-support, .has-support) code), output:not(code:has(output) output) {
			background: #f7f7f7;
			border: 1px solid rgb(0 0 0 / 0.2);
			padding: 0.1rem 0.3rem;
			margin: 0.1rem 0;
			border-radius: 0.2rem;
			display: inline-block;
		}
	}

	@layer support {
		.no-support,
		.has-support {
			margin: 1em 0;
			padding: 1em;
			border: 1px solid #ccc;
		}

		.no-support {
			background-color: #ff00002b;
			display: block;
		}
		.no-support[data-level="warn"] {
			background-color: #ffff002b;
		}
		.has-support {
			background-color: #00ff002b;
			display: none;
		}
		:is(.has-support, .no-support) > :first-child {
			margin-top: 0;
		}
		:is(.has-support, .no-support) > :last-child {
			margin-bottom: 0;
		}
		
		@property --supports-at-property {
			syntax: "*";
			initial-value: ;
			inherits: true;
		}
		.no-support[data-support="at-property"], [data-no-support="at-property"] {
			--value-when-supported: var(--supports-at-property) none;
			--value-when-not-supported: block;
			display: var(--value-when-supported, var(--value-when-not-supported));
		}
		.has-support[data-support="at-property"], [data-has-support="at-property"] {
			--value-when-supported: var(--supports-at-property) block;
			--value-when-not-supported: none;
			display: var(--value-when-supported, var(--value-when-not-supported));
		}

		@supports (transform: scaleX(cos(360deg))) {
			.no-support[data-support="css-trig-fns"] {
				display: none;
			}
			.has-support[data-support="css-trig-fns"] {
				display: block;
			}
		}

		@supports selector(:nth-child(1 of *)) {
			.no-support[data-support="selector-nth-of-s"] {
				display: none;
			}
			.has-support[data-support="selector-nth-of-s"] {
				display: block;
			}
		}
	}
}
document.querySelector('select').addEventListener('change', e => {
	document.querySelectorAll('tbody tr').forEach($tr => $tr.removeAttribute('hidden'));
	if (e.target.value) {
		document.querySelectorAll(`tbody tr:not([data-type="${e.target.value}"])`).forEach($tr => $tr.setAttribute('hidden', 'hidden'));
	}
});

document.querySelector('form').addEventListener('submit', e => e.preventDefault());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.