Skip to content

Instantly share code, notes, and snippets.

@Cst2989
Last active July 27, 2022 13:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Cst2989/1bc9589859f9d7d81121dd523aedcc59 to your computer and use it in GitHub Desktop.
Save Cst2989/1bc9589859f9d7d81121dd523aedcc59 to your computer and use it in GitHub Desktop.
Specificity Example
<html>
<style>
#test {
color:red;
}
.test-0.cls-1.cls-2.cls-3.cls-4.cls-5.cls-6.cls-7.cls-8.cls-9.cls-10.cls-11.cls-12.cls-13.cls-14.cls-15.cls-16.cls-17.cls-18.cls-19.cls-20.cls-21.cls-22.cls-23.cls-24.cls-25.cls-26.cls-27.cls-28.cls-29.cls-30.cls-31.cls-32.cls-33.cls-34.cls-35.cls-36.cls-37.cls-38.cls-39.cls-40.cls-41.cls-42.cls-43.cls-44.cls-45.cls-46.cls-47.cls-48.cls-49.cls-50.cls-51.cls-52.cls-53.cls-54.cls-55.cls-56.cls-57.cls-58.cls-59.cls-60.cls-61.cls-62.cls-63.cls-64.cls-65.cls-66.cls-67.cls-68.cls-69.cls-70.cls-71.cls-72.cls-73.cls-74.cls-75.cls-76.cls-77.cls-78.cls-79.cls-80.cls-81.cls-82.cls-83.cls-84.cls-85.cls-86.cls-87.cls-88.cls-89.cls-90.cls-91.cls-92.cls-93.cls-94.cls-95.cls-96.cls-97.cls-98.cls-99.cls-100.cls-101 {
color: blue;
}
</style>
<body>
<p id="test" class="test-0">Hello World</p>
<script>
let cls = 'test-0';
for(let i = 1; i < 102; i++){
cls = cls + ' cls-' + i;
}
const el = document.getElementById('test');
el.classList = cls;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment