0

I have a nested list and I want to make child items normal font only for example parents should be bold 20, child should be bold 17 and sub child items should be normal 17px.

I tried by in my case sub child items also appear as bold, I tried few different but it breaks one of the things.

I want to make parent items bold 20 and if it has nested list then second level will be bold 17 otherwise it should be normal 17 of a child doesn't have child items

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

  • List item 1 (BOLD 20)
    • Subitem 1 (BOLD 18)
      • Sub Subitem 1
      • Sub Subitem 2
      • Sub Subitem 3
      • Sub Subitem 2
    • Subitem 2
      • Sub Subitem 1
      • Sub Subitem 2
      • Sub Subitem 3
      • Sub Subitem 2
  • List item 2 (BOLD 20)
    • Subitem 1
    • Subitem 2
    • Subitem 3
    • Subitem 2
  • List list 3 (BOLD 20)
    • Subitem 1
    • Subitem 2
    • Subitem 3
    • Subitem 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;}
Learning
  • 19,469
  • 39
  • 180
  • 373
  • In css3 you can't apply property to an element, based on number of children it has. If you know that element have children at html creation time, you can add a class to it. Otherwise javascript is the best option. – Swaroop Deval Sep 22 '19 at 11:48
  • @SwaroopDeval, what are the two ways, i tried has child properties also but that didnt work. what is the simple way of doing it. I just wanted to avoid use of jquery – Learning Sep 22 '19 at 11:50

2 Answers2

1

if you can add an extra wrapper (a span element for example) you can use the :only-child selector (or :first-child:last-child)

I kept only the relevant styles for the demo

.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>

Here is a smal jQuery code to automatically add the extra wrapper:

$('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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Agree with you, but my list will not have any span element it will be only have ul, li elements.. as this is auto generated by code and i am trying to use css to format it as mentioned in the question. – Learning Sep 23 '19 at 03:26
  • @Learning added another solution based on the first one where I will add the span using JS – Temani Afif Sep 26 '19 at 12:15
-1

You can target the list you would like with first-of-type selector:

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

https://jsfiddle.net/b3mtzu65/

You can also refactor your code so that your sub-items are inside ul also, so that you can use the following selector:

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

https://jsfiddle.net/0beshpc1/

mulsun
  • 563
  • 5
  • 15
  • 1
    @Learning this is actually not working, the code is explicitely tageting a specific list to apply the styles. Change the order of your lists and this will fail: https://jsfiddle.net/skmt1oru/ (unless you will always have the first list with nested element) – Temani Afif Sep 22 '19 at 12:25
  • @TemaniAfif updated the answer for other possibilities using your sample. – mulsun Sep 22 '19 at 14:13
  • 1
    This is kind of a case that semantic structure will affect the styling of the list, supposing that author wants to do it with only element selectors. On the current semantics of the list, if an item doesn't have multiple sub-items, they don't get to have a heading, but on the above commented list it does. In any way, you should target the elements with classes, element selectors are inexplicit and hard to maintain, not a good coding practice at all. Read along if you are interested https://stackoverflow.com/questions/36703546/what-is-bem-methodology – mulsun Sep 22 '19 at 14:47