: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 …
I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element …
HTML lists are boring. They don’t do much, so we don’t really think about them despite how widely used they are. And we’re still able to do the same things we’ve always done to customize them, like removing markers, reversing …
Earlier this year, I self-published an ebook called Understanding JavaScript Promises (free for download). Even though I didn’t have any intention of turning it into a print book, enough people reached out inquiring about a print version that …
A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.…
Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start …
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style …
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post TitleBut the above …
I sure didn’t! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute:…
In my germinating years, the general advice was this:
<ul>
<li><span>List item</span></li>
<!-- ... -->
</ul>li { color: red; } /* bullet */
li span { color: black; } /* text */Not terrible, but not great. You’re “resetting” …
Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive. For example, say you have to handle a dataset …
