I have used the universal selector (*) to reset CSS on the page.

I cannot work out how to reinstate the bullets (list-style-type) back on to the li items

I have tried adding display: list-item; to the li selector following the reset but this does not work.

I thought it may have been due to specificity, but even after I added !important keyword, it still did not work.

I have added my test selectors below to show what I have tried but have commented them out.

Am I barking up the wrong tree here?

Can someone help me understand how this can be achieved?

* {
  padding: 0;
}
/*
ul {
  list-style: circle;
}
li{
  display: list-item !important;
  padding-left: 30px;
}
*/
<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>

2 Answers

0
NullDev On

Use the list-style-position property and set it to inside.
Then, the padding doesn't affect it.

* {
  padding: 0;
}

ul {
  /* if you want the standard bullets, use 'disc' instead of 'circle' */
  list-style: circle;
  list-style-position: inside;
}
<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>

0
Pete Smyth On

Thanks, @NullDev that worked for me.

I also found that if I set the padding-left on the ul element (and not on the li element as I was doing) it will work as well

I had been searching for an answer for this for nearly 2 hours.

* {
  padding: 0;
}

ul {
  list-style: circle;
  padding-left: 40px;
}
<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>