What's data-sizing in css selector here?

Question

Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.

Do you know what does the following css code means?

.awesome[data-sizing="intrinsic"] {
  width: min-content;
}

What's this data-sizing attribute? I can't find it anywhere.

Thanks!

Here is an explanation of data-* https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes — Rickard Elimää, Jul 20 '21 at 00:39

franklylately · Accepted Answer · 2021-07-20T01:10:00.133

Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.

width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.

1 Answers1