👋 Hello!
I think using :is is fine, but I would probably move the cursor: pointer to the base element (non-hover) instead.
More importantly though, it would be a lot better if the proper interactive HTML elements, i.e. <button> or <a>, were used instead of <div>, <u> and <b>. Using the proper elements would help with accessibility greatly - able to navigate on with keyboard, pressing "Space" or "Enter" triggers the element, screen reader would announce that it is a clickable button or link, etc.
As for how to anchor the footer note, my approach was to use CSS grid. I'd declare 3 rows (1fr, auto, 1fr) and have the <main> in row 2 and <footer> in row 3. Row 1 is an empty row to help keep <main> centered perfectly (thus why it is 1fr, similar to row 3).
I hope this helps and happy coding!
Marked as helpful
@mochimooo
Posted
@Milleus Can I ask what do you mean by moving "cursor: pointer to the base element (non-hover)"?
And thank you for giving the advice on CSS grid! I haven't really touch on that subject yet but it sounds helpful to learn it.
@mochimooo Ah, I would usually put cursor: pointer as part of the base styling of a button so when there are no hover or focus, a button would still have cursor: pointer when moused over.
I think a tiny advantage of this is writing less code when there are more button variants because I wouldn't have to keep setting cursor: pointer to each button variant's hover and focus.
something like this:
.button {
// base styling of a button
...
cursor: pointer; // I'd add it here
}
.button[data-variant="primary"] {
background-color: red;
}
.button[data-variant="primary"]:hover,
.button[data-variant="primary"]:focus {
background-color: pink;
}
.button[data-variant="secondary"] {
background-color: blue;
}
...
Oh, as for CSS grid, check out this video by Kevin Powell where he covers various grid concepts. Reaaaallly good video that helped me understand CSS grid a lot deeper.
There are also some CSS grid game websites like CSS grid garden to test your grid skills :)
