CSS put html tag style in a class

Question

I have CSS for UL that as it used for accordion. But I want to put class so if I use UL with other function it will not use this styles:

ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding-top: 7px;
  margin: 0;
}

ul li:last-of-type {
  padding-bottom: 0;
}

ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 6px;
  right: 0;
}

ul li i:before,
ul li i:after {
  content: "";
  position: absolute;
  background-color: #999;
  width: 3px;
  height: 9px;
}

ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

ul li input[type=checkbox]:checked~p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

ul li input[type=checkbox]:checked~i:before {
  transform: translate(2px, 0) rotate(45deg);
}

ul li input[type=checkbox]:checked~i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

This styles is for accordion functionality. What if I used UL tag but not for the purpose of accordion.

Answer 1

You can add class to ul like accordion

 .accordion { list-style: none; perspective: 900; padding: 0; margin: 0; } .accordion li { position: relative; padding-top: 7px; margin: 0; } .accordion li:last-of-type { padding-bottom: 0; } .accordion li i { position: absolute; transform: translate(-6px, 0); margin-top: 6px; right: 0; } .accordion li i:before, .accordion li i:after { content: ""; position: absolute; background-color: #999; width: 3px; height: 9px; } .accordion li i:before { transform: translate(-2px, 0) rotate(45deg); } .accordion li i:after { transform: translate(2px, 0) rotate(-45deg); } .accordion li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; } .accordion li input[type=checkbox]:checked~p { margin-top: 0; max-height: 0; opacity: 0; transform: translate(0, 50%); } .accordion li input[type=checkbox]:checked~i:before { transform: translate(2px, 0) rotate(45deg); } .accordion li input[type=checkbox]:checked~i:after { transform: translate(-2px, 0) rotate(-45deg); }

 <ul class="accordion"> <li>First</li> <li>Second</li> <li>Third</li> </ul>