:where(ul, li, menu) {
list-style: "";
}
The more “correct” approach is to set list-style
to none
but that has a latent consequence of Safari no longer recognizing the element as a proper list, semantically speaking. We could fix this in HTML:
<ol style="list-style: none;" role="list">
<li role="listItem">...</li>
<li role="listItem">...</li>
<li role="listItem">...</li>
</ol>
<ul style="list-style: none;" role="list">
<li role="listItem">...</li>
<li role="listItem">...</li>
<li role="listItem">...</li>
</ul>
…but the CSS snippet prevents us from having to maintain things in two places. The snippet works because an empty string evaluates to exactly that: an empty string.
![DevTools showing the computed value for the an unordered list with a style type set to empty quotes.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/05/list-style-type-quotes.png?resize=1024%2C327&ssl=1)
As with anything like this, it’s worth thoroughly testing with screen readers and real users to ensure that the semantics and accessibility of your work are not negatively impacted.