<div>
  <h2>No class</h2>
  <ul>
    <li>Tehran</li>
    <li>Mashhad</li>
    <li>Isfahan</li>
    <li>Tabriz</li>
    <li>Shiraz</li>
    <li>Ahvaz</li>
  </ul>
</div>
<div>
  <h2>Has class</h2>
  <ul class="poets-list">
    <li>Hafez</li>
    <li>Ferdowsi</li>
    <li>Omar Khayyam</li>
    <li>Saadi Shirazi</li>
    <li>Forough Farrokhzad</li>
    <li>Nizami Ganjavi</li>
  </ul>
</div>
:where(ul[class]) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.poets-list {
  list-style-type: disclosure-closed;
}










@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 5rem;
  min-height: 100vh;
  background-color: #192a69;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
}

li {
  margin-bottom: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.