<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());
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.