How do I fix the indentation on the second layer of a custom bullet list and still keep the margin o-CodePudding

I want to create a custom bullet list (change the bullet color) and adjust the margins of the rows without effecting every row (first row would be 75px, second 15px right of first row). Right now it just makes the first row 75px, then the second row 150px from the border. html:

<div >
  <p1>Vocab</p1>
  <div >
     <ul>
        <li>Word</li>
           <ul>
              <li>Definition</li>
           </ul>
     </ul>
  </div>
</div>

css:

.vocab > .list ul {
  list-style: none;
  margin-left: 75px;
  padding: 0;
  color: black;
}
.vocab > .list ul li::before {
  content: "\2022";
  padding: 10px;
  color: red;
}

CodePudding user response：

I think your problem are the nested lists. Each of the lists gets a margin-left: 75px, which means the second one will be 2 * 75px indented.

I think the best solution would be for you to rethink your markup. Do you really need that second ul element? Maybe a different element would be better? For instance inside the li you could have 2 spans, one for the word and another for the word definition.

But if you want to keep that markup, and remove the margin from the second ul, maybe something like this would help you:

ul ul {
    margin-left: 0 !important;
}

This will remove the margin left from any ul element which is inside of another ul element. The !important is needed because of the specificity of the selectors you are already using