Как сделать дочерний элемент li во вложенном списке обычным шрифтом?

Question

У меня есть вложенный список, и я хочу сделать дочерние элементы обычным шрифтом, например, родители должны быть жирным шрифтом 20, дочерние элементы должны быть жирными 17, а дочерние элементы должны быть обычными 17px.

Я пробовал вмои дочерние элементы кейса также отображаются жирным шрифтом, я пробовал несколько разных, но это ломает одну из вещей.

Я хочу сделать родительские элементы жирным шрифтом 20, и если у него есть вложенный список, то второй уровень будет bold 17в противном случае это должен быть normal 17 ребенок, не имеющий дочерних элементов

https://jsfiddle.net/mk0d3jw8/3/

• Элемент списка 1 (BOLD 20)
  • Подпункт 1 (BOLD 18)
    • Подпункт 1
    • Подпункт 2
    • Подпункт 3
    • Подпункт 2
  • Подпункт 2
    • Подпункт 1
    • Подпункт 2
    • Подпункт 3
    • Подпункт 2
• Элемент списка 2 (полужирный 20)
  • Подпункт 1
  • Подпункт 2
  • Подпункт 3
  • Подпункт 2
• Списоксписок 3 (полужирный 20)
  • подпункт 1
  • подпункт 2
  • подпункт 3
  • подпункт 2

CSS

.directory-w ul
{
list-style-type: none;
margin: 0;
padding: 5px;
margin-left:30px;
}
.directory-w ul li{ color:#757575; font-size:20px;}
@media (min-width:768px){
.directory-w > ul {
    columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  }
  }
.directory-w > ul > li > ul > li {font-weight:bold;}
.directory-w ul ul li {list-style-type: disc; font-weight:normal;   font-size:15px;}
.directory-w ul  li li {list-style-type: disc;font-weight:normal; font-size:15px;}
.directory-w  ul > li > ul > li  > ul > li {font-weight:normal !important;}

Answer 1

если вы можете добавить дополнительную обертку (например, элемент span), вы можете использовать селектор :only-child (или :first-child:last-child)

^{Я сохранил только соответствующие стили для демонстрации}

.directory-w ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  margin-left: 30px;
}

.directory-w ul li {
  color: #757575;
  font-size: 20px;
}

.directory-w ul li span:only-child {
  font-weight:normal;
  font-size:17xp;
}

.directory-w>ul>li>ul>li {
  font-weight: bold;
}

.directory-w ul ul li {
  font-weight: normal;
  font-size: 15px;
}

<div class="directory-w">
  <ul>

    <li>List item 1 (BOLD 20)
      <ul>
        <li><span>Subitem 1 (BOLD 18)</span>
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>

        <li><span>Subitem 2</span>
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>List item 2 (BOLD 20)
      <ul>
        <li><span>Subitem 1</span></li>
        <li><span>Subitem 2</span></li>
      </ul>
    </li>
    <li>List list 3 (BOLD 20)
      <ul>
        <li><span>Subitem 1</span></li>
        <li><span>Subitem 2</span></li>
      </ul>
    </li>
  </ul>
</div>

Вот небольшой код jQuery для автоматического добавления дополнительной оболочки:

$('ul > li > ul > li:has(ul)').each(function() {
  $(this).contents().eq(0).wrap('<span></span >')
})

.directory-w ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  margin-left: 30px;
}

.directory-w ul li {
  color: #757575;
  font-size: 20px;
}

.directory-w ul li ul span {
  font-weight:bold;
  font-size:17xp;
}


.directory-w ul ul li {
  font-weight: normal;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="directory-w">
  <ul>

    <li>List item 1 (BOLD 20)
      <ul>
        <li>Subitem 1 (BOLD 18)
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>

        <li>Subitem 2
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>List item 2 (BOLD 20)
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
    <li>List list 3 (BOLD 20)
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

Вы можете выбрать нужный список с помощью селектора first-of-type:

.directory-w > ul > li:first-of-type > ul > li {
  font-weight: bold;
}

https://jsfiddle.net/b3mtzu65/

Вы также можете реорганизовать свой код, чтобы ваши подпункты находились внутри ulтакже, чтобы вы могли использовать следующий селектор:

.directory-w ul>li>ul:not(:only-child)>li {
  font-weight: bold;
}

https://jsfiddle.net/0beshpc1/