Can a dynamic class be styled using CSS? [duplicate]

by

Yes it is possible just by using CSS only.

Option #1 – Match by prefix value

  • Use CSS Class selector ^="class" which select all elements whose class is prefixed by “box-“
[class^="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>

Option #2 – Match by contains at least one value

  • Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring “box-“.
[class*="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. Are class names in CSS selectors case sensitive?
  5. Why doesn’t table > tr > td work when using the child selector?
  6. CSS selector by inline style attribute
  7. :last-child not working as expected?
  8. Using CSS :before and :after pseudo-elements with inline CSS?
  9. Using :before and :after CSS selector to insert HTML [duplicate]
  10. :nth-child(even/odd) selector with class [duplicate]
  11. How to CSS: select element based on inner HTML [duplicate]
  12. What is the performance impact of the universal selector?
  13. Why is nth-child selector not working?
  14. CSS selector with period in ID
  15. Can a ::before selector be used with a ?
  16. Avoiding repeated constants in CSS
  17. What is the ::content/::slotted pseudo-element and how does it work?
  18. CSS Selector “(A or B) and C”?
  19. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  20. How to get CSS to select ID that begins with a string (not in Javascript)?
  21. How do I select an element that has a certain class?
  22. Selecting the last element among various nested containers
  23. Zebra striping a flexbox table with wrapping items
  24. CSS attribute selector does not work a href
  25. How to use nth-child for styling with a table with rowspan?
  26. CSS Selector for No-Children-But-Not-Empty
  27. Is there a CSS not equals selector?
  28. How can I select elements in CSS by partial ID value?
  29. How can I get a specific number child using CSS?
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment