list-style does not return to default

1

Well, I'm developing a website, and the following problem came up:

I reset all elements of the site;

*{
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    background-color:inherit;
    margin:0;
    padding:0;
    text-decoration:none;
    border:none;
    outline:none;
    box-sizing:border-box;
    list-style:none;
}

However, now I need to use a list with the balls in the list, so I used the css below:

.video-description ul,.video-description ol{
    list-style:initial;
    list-style-type:disc;
    list-style-position:outside;
    list-style-image:initial;
    padding:0 0 0 24px;
    margin:12px 0 24px;
}

However, the balls do not appear again, how can I correct the problem? (I tested with a normal ul)

    
asked by anonymous 06.10.2017 / 16:20

1 answer

2

The list-style style is applied to the li element. Since your reset to disk is only in ul , in this case the setting in * is applied.

To fix, set the rule for li elements:

* {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background-color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  outline: none;
  box-sizing: border-box;
  list-style: none;
}

.video-description ul,
.video-description ol {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: initial;
  padding: 0 0 0 24px;
  margin: 12px 0 24px;
}
.video-description ul li,
.video-description ol li {
  list-style: initial;
}
body {
  margin: 20px;
}
<h1>
Lista fora dos divs
</h1>
<div>
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
<hr />
<h1>
Lista ul
</h1>
<div class="video-description">
  <ul>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
    
06.10.2017 / 16:32