Prefer semantic CSS selectors

Use semantic attribute-based selectors instead of structural or overly specific class names when the semantic meaning is already captured in HTML attributes. This makes CSS more maintainable by connecting styles to the actual meaning of elements rather than their position in the DOM.

For example, instead of:

.paginator .this-page {
    padding: 2px 6px;
}

/* or */

ol.breadcrumbs li:last-child a {
    color: var(--breadcrumbs-fg);
    text-decoration: none !important;
    cursor: default;
}

Prefer:

.paginator a[aria-current="page"] {
    padding: 2px 6px;
}

Also, ensure interactive elements have complete selector sets that include all relevant states:

.datetimeshortcuts button:hover, .datetimeshortcuts button:focus {
    /* styles */
}

This approach improves code maintainability, better communicates intent, and naturally supports accessibility by leveraging semantic HTML attributes.