My list response to css only when Im using li-CodePudding

I'm making a lottery display. I'm trying to style my list that shows the "winning numbers" but the style applies only when I'm using li on CSS. I tried using div to all li or giving a class to all li's - not working...

.draw_numbers {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 8px;
  margin-left: 7px;
  background: #666;
  border: 2px solid #666;
  color: #000;
  text-align: center;
  float: left;
  list-style-type: none;
  line-height: 35px;
  font-size: 127.4%;
}

<ul>
  <div >
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li style="background: red !important;" >
      <div  aria-hidden="true">BB</div>
    </li>
  </div>
</ul>

CodePudding user response：

You can not have a div as a child of a ul. You are applying the css to the wrong element.

.draw_numbers li {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 8px;
  margin-left: 7px;
  background: #666;
  border: 2px solid #666;
  color: #000;
  text-align: center;
  float: left;
  list-style-type: none;
  line-height: 35px;
  font-size: 127.4%;
}

.draw_numbers li.special {
  background-color: red;
}

<ul >

    <li ></li>

    <li ></li>

    <li ></li>

    <li ></li>

    <li ></li>

    <li ></li>

    <li >
      <div  aria-hidden="true">BB</div>
    </li>

</ul>

CodePudding user response：

They won't be integrated because you need to specify that draw_numbers is a class, just a little tiny dot seems like enough to do the work in your style tag.

CodePudding user response：

Have you tried to act directly on the class you have assigned to your li? .numbers or .main You can also try assigning the class .draw_number to your ul tag: .draw_number .li { ... }