CSS styles not inheriting a style in a nested list-CodePudding

I would like it to not inherit stylized bullet points in a nested list. Instead, I would like them to be regular dots. How could I edit my CSS style to eliminate this problem?

.check-list {
  margin: 0;
  padding-left: 2.0rem;
  margin-bottom: 32px;
}

.check-list li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.check-list li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 15px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #005A77;
      opacity: 0.7;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

<ul >
    <li>One</li>
    <li>Two
        <ul>
            <li>Two.One</li>
            <li>Two.Two</li>
        </ul>
    </li>
</ul>

CodePudding user response：

You can just use direct child selector. Use

.check-list > li
{...}
.check-list > li:before
{...}

instead of

.check-list li
{...}
.check-list li:before
{...}

And the nested list still sticks to circle not dot/ disc. You should override that by styling that before .checklist

li {
  list-style-type: disc;
}

li {
  list-style-type: disc;
}

.check-list {
  margin: 0;
  padding-left: 2.0rem;
  margin-bottom: 32px;
}

.check-list > li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.check-list > li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 15px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #005A77;
      opacity: 0.7;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

<ul >
    <li>One</li>
    <li>Two
        <ul>
            <li>Two.One</li>
            <li>Two.Two</li>
        </ul>
    </li>
</ul>

CodePudding user response：

Child combinator should fix this.

.check-list {
  margin: 0;
  padding-left: 2.0rem;
  margin-bottom: 32px;
}

.check-list > li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.check-list > li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 15px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #005A77;
      opacity: 0.7;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

<ul >
    <li>One</li>
    <li>Two
        <ul>
            <li>Two.One</li>
            <li>Two.Two</li>
        </ul>
    </li>
</ul>

CodePudding user response：

Change only this line: .check-list li:before { to .check-list li:not(ul ul li):before {

And this class:

.check-list li ul li {
  list-style-type: circle;
}

.check-list {
  margin: 0;
  padding-left: 2.0rem;
  margin-bottom: 32px;
}

.check-list li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.check-list li ul li {
   list-style-type: circle;
}

.check-list li:not(ul ul li):before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 15px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #005A77;
      opacity: 0.7;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

<ul >
    <li>One</li>
    <li>Two
        <ul>
            <li>Two.One</li>
            <li>Two.Two</li>
        </ul>
    </li>
</ul>