0

I need to do a CSS that supports a special bullet via the use of li::before as well as ordered lists that vary depending on their depth. My problem is that the use of li::before is causing a conflict between the <UL> and the <OL> versions.

<div class='div'>
  LI...
  <li>Bullet1</li>
  <li>Bullet2</li>
  <HR>

  UL...
  <ul>
    <li>Bullet3</li>
    <li>Bullet4</li>
    <ul>
      <li>Bullet5
      </li>
    </ul>
  </ul>

  <HR>
  OL....
  <ol>
    <li>Number1</li>
    <li>Number2</li>
  </ol>

  <HR>
  OL...OL/UL...
  <ol>
    <li>Number3</li>
    <ol>
      <li>Number3.1</li>
      <ul>
        <li>Bullet6</li>
      </ul>
      <ol>
        <li>Number3.1.1</li>
      </ol>
    </ol>
    <ul>
      <li>Bullet7</li>
    </ul>
  </ol>

</div>

I'm using the following CSS

    ol,ul {
        margin:5px 1px;
        padding-inline-start:21px;
        padding-bottom:1px;
    }
    ol ul + h1,h2,h3,h4,h5,h6,p {
        padding-top:0;
    }
    .div ol > li {
        line-height:1.5em;
        margin-left:0;
        padding-left:0;
    }

    .div ul  >  ol {
        list-style-type: lower-alpha;
        padding-inline-start:18px;
    }
    .div ol  >  ol {
        list-style-type: lower-alpha;
        padding-inline-start:18px;
    }
    .div ul > ul > ol {
        list-style-type: lower-roman;
        padding-inline-start:23px;
        padding-left:25px;
    }
    .div ol > ol > ol {
        list-style-type: lower-roman;
        padding-inline-start:23px;
        padding-left:25px;
    }
    .div ol > ul > ol {
        list-style-type: lower-roman;
        padding-inline-start:23px;
        padding-left:25px;
    }

    .div ol > ol > ul > li {
        content:"▶"!important;
        color:green!important;
    }
    .div ul > li {
        line-height:1.4em;
    }
    .div > li {
        line-height:1.4em;
        margin-left:0;
    }
    .div li + li { /* This is the gap between LI bullets */
        margin-top:8px;
    }
    .div ul>li, .div>li {
        list-style-type:square;
        display:table;
        border-spacing:0;
    }
    .div ol li::marker {
        color: #866767;
        font-weight:600;
        font-size:90%;
    }
    .div ol li::before {
        content:unset;
    }
    .div ul {
        list-style-position: outside;
        padding:0;
        margin:0 0 0 23px;
    }
    .div li::before {
        content:"▶";
        list-style-type: none;
        color:red;
        font-size:15pt;
        font-weight:bold;
        padding:1px 10px 0 0;
        line-height:18px;
        display:table-cell;
        vertical-align:top;
        xmargin-left:-20px;
    }
    .div ul + * {
        margin-top:15px;
    }

I can't seem to get Bullet6 to have a triangle bullet as seen in the other Bullets1-5 Where am I going wrong?

A working version of the code can be found on https://jsfiddle.net/Abeeee/2a6br3yj/27/

user1432181
  • 918
  • 1
  • 9
  • 24
  • 2
    It may not be the problem, but your html isn't syntactically valid, according to this post https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list . the nested
      & ol should be inside
    • s.
     – Reed Jun 14 '21 at 16:07
  • 2
    Your forgot the pseudo class ::before in your css. – G-Cyrillus Jun 14 '21 at 16:12
  • I think your actual problem is CSS Specificity. If I'm not mistaken `.div ol li::before {` is more specific than `.div li::before {`. This threw me off because Bullet 6 is descendant of a
      . BUT that's also nested within an
      so i think the ::before is catching the `ol li` and having content `unset`
     – Reed Jun 14 '21 at 16:12
  • 1
    If you do fix the html so that every nested ul/ol's parent is an li, you'd have to change all your CSS, but it also might lend toward a more maintainable refactor. Then you'd have `.div ul` for lvl1, `.div li ul` for lvl 2, `.div li li ul` for lvl3 and so on. That might not totally work with what you're trying to do. Idk. Also, its your code, your project, nd I'm not maintaining it, so don't take my advice if you're happy with how things are going. – Reed Jun 14 '21 at 16:20
  • 1
    @Reed and
  • should be wrapped with
      or
      , not
    • – blackbiron Jun 15 '21 at 01:48