Change from element selector to the opt-in class

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index ecacb05f287da4965c04ab4a67cca66f3c14c2cd..2193168c52fdee792e6fc1ac4a592fc6ccaba813 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -12,8 +12,7 @@
   @include border-radius($list-group-border-radius);
 }
 
-// stylelint-disable selector-no-qualifying-type
-ol.list-group {
+.list-group-numbered {
   list-style-type: none;
   counter-reset: section;
 
@@ -23,7 +22,6 @@ ol.list-group {
     counter-increment: section;
   }
 }
-// stylelint-enable selector-no-qualifying-type
 
 
 // Interactive list items

diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index 4caaeb8de70420be6fc1a7d84d7a3c25333c8aaf..6cad46a4de61d5e5ff23d9247ec51a7a7b0aeb63 100644 (file)
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -94,14 +94,14 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 </ul>
 {{< /example >}}
 
-## Ordered list
+## Numbered
 
-Replace the unordered list element with an ordered list to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
+Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
 
 Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` psuedo-element on the `<li>` with `counter-increment` and `content`.
 
 {{< example >}}
-<ol class="list-group">
+<ol class="list-group list-group-numbered">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Cras justo odio</li>
@@ -111,7 +111,7 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac
 These work great with custom content as well.
 
 {{< example >}}
-<ol class="list-group">
+<ol class="list-group list-group-numbered">
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="ms-2 me-auto">
       <div class="fw-bold">Subheading</div>