How to Exclude Children
from CSS Styling

Question

I'm using SharePoint Designer and I would like to apply a custom bullet on the parent li (Desc 1 and Desc 2) of my list, but what's happening is that it is being applied on all the list items including the children li. Can someone help me with it? how it should be done correctly in CSS? Thanks.

.tab-content.content-show ul li {
    list-style-image: url(/img.png);
}

.tab-content.content-show ul li > li {
    list-style-image: none !important;
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

score 1 · Answer 1 · answered Jun 22 '21 at 08:47

To select the direct children and not the grandchildren, you can use ">" as shown below

.tab-content.content-show div > ul > li {
    list-style-image: url(/img.png);
}

And no need for 2nd class.

here is the customized css:

.tab-content.content-show div > ul > li {
    background: url("https://www.kindpng.com/picc/m/313-3131657_blue-bullets-icon-png-transparent-png.png") left center no-repeat;
    background-size:20px;
    padding: 0 0 0 40px;
    
}

score 1 · Answer 2 · answered Jun 22 '21 at 08:52

You were pretty close. Your CSS should look like this:

.tab-content.content-show div > ul > li {
    list-style-image: linear-gradient(to left bottom, red, blue);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

The Child Selector (>) applies the CSS rules to the direct children of the particular element.

See this related answer: https://stackoverflow.com/a/4830672/801544

Note I've used a gradient instead of an image just to show that it works, but you can use any image instead.

mojgan kiyani · Answer 3 · 2021-06-22T09:52:17.133

you should use "ul:first-child" in css:

.tab-content.content-show ul:first-child > li{
    list-style-image: url(https://www.w3schools.com/cssref/sqpurple.gif);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

score 0 · Answer 4 · answered Jun 22 '21 at 08:41

0

Do you have access to the HTML code? If yes I would put a class on the li you are interested in.

<li class="custom-bullet">Desc 1</li>

.custom-bullet {
   list-style-image: url(/img.png);
}

answered Jun 22 '21 at 08:41

Laxmana

1,606
2
21
40

Sadly I don't have access to the
of the parent list items. Those lists are coming from the backend and are bulleted already. @Laxmana

Xev

Jun 22 '21 at 08:50

Quentin · Answer 5 · 2021-06-22T08:56:05.693

.tab-content.content-show ul li > li is going to match li elements that are children of li elements … which is not allowed in HTML.

Just use child combinators instead of descendant combinators in the first place.

.tab-content.content-show > div > ul > li {
    list-style-image: url(http://placekitten.com/20/20);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
  <div>
    <ul>
      <li class="parent">Desc 1 </li>
      <ul>
        <li>details 1</li>
        <li>details 2</li>
        <li>details 3</li>
        <li>details 4</li>
      </ul>
      <li class="parent">Desc 2 </li>
      <ul>
        <li>details 1</li>
        <li>details 2</li>
        <li>details 3</li>
        <li>details 4</li>
      </ul>
    </ul><br>
  </div>

I tried this but it's not getting the custom bullet already. @Quentin — Xev, Jun 22 '21 at 08:52

score 0 · Answer 6 · edited Jun 22 '21 at 09:07

The best way to solve this problem is to give parent list items a class attribute and you style that class.

li.parent {
  list-style-image: url(/img.png);
}

.tab-content.content-show ul li > li {
  list-style-image: none !important;
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class="parent">Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class="parent">Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

I would like to do it that way but I don't have access to the

mojgan kiyani · Answer 7 · 2021-06-22T09:41:32.280

.tab-content.content-show ul li.parent {
  list-style-image: url(/img.png);
}

<div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class='parent'>Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class='parent'>Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

I would love to do it that way but I don't have access to the

score 0 · Answer 8 · answered Jun 22 '21 at 09:02

You can change your css to following way

.tab-content.content-show > Div >  ul > li {
   color:red;
 }

see the jsFiddle

As well as you can set unique class both and and set colors accessing that class like following

.html

    <div class="tab-content content-show" data-content-id="1" id="content-1">
    <div>
        <ul>
            <li class="Desc1">Desc 1 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
            <li class="Desc2">Desc 2 </li>
            <ul>
                <li>details 1</li>
                <li>details 2</li>
                <li>details 3</li>
                <li>details 4</li>
            </ul>
        </ul><br>
    </div>
</div>

.css

.tab-content.content-show  .Desc1{
   color:red;
}

.tab-content.content-show  .Desc2{
   color:green;
}

see the jsfiddle

How to Exclude Children from CSS Styling

8 Answers8

How to Exclude Children
from CSS Styling