CODEWITHSUNDEEP
csscss-selectors
user742030
user742030

Reputation:

CSS - How to target Second Child List Items?

I am having trouble targeting the <li> of a <ul> that is a child of another <li> using a CSS child combinator selector - >.

I am needing to add a list_style_type:SomethingElse to only those list items and list-style-type: none; for all others.

I am already using the following to remove the list style:

.snap-drawer ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

And the following does'nt chang anything:

.snap-drawer ul > li {
    list-style-type: disc !important;
}

The HTML:

<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

Upvotes: 2

Views: 1747

Answers (2)

DaniP
DaniP

Reputation: 38252

Option1

You are removing the padding then the bullet isn't visible.

Also target the ul inside li item. Try:

.snap-drawer ul > li > ul {
    padding-left:25px;
    list-style-type: disc !important;
}


.snap-drawer ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.snap-drawer ul > li > ul {
  padding-left: 25px;
  list-style-type: disc !important;
}
<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

Option2

You can try the > selector just for the first ul too:

.snap-drawer > ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}


.snap-drawer > ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

Upvotes: 3

Barry T. Smith
Barry T. Smith

Reputation: 1051

What you need is this:

.snap-drawer ul ul > li {
    list-style-type: disc !important;
}

Or more simply:

.snap-drawer ul ul li {
    list-style-type: disc;
}

Upvotes: 0

Related Questions