CODEWITHSUNDEEP
css
NinjaValerie
NinjaValerie

Reputation: 77

How to select first set of <li> to add a pseudo class to, but not the nested <li>s

I've added a custom image to replace the bullet-list li. I've added it as a pseudo-class using ::before. However, I am not able to target only the first set of "li"s. Is it not possible with psuedo-classes? I have already tried targeting the first set of li::before like this with no success:

.hand-bullet-list > ul > li::before{

.hand-bullet-list ul{
    list-style-type: none;
    margin-left: 0px;
}

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.hand-bullet-list ul li::before{
    background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
    content: "";
    width: 40px;
    height: 42px;
    position: absolute;
    left: 0px;
    top: 0px;
}
<div class="hand-bullet-list bullet-list-two-columns">
<p><strong>Committee<br />
</strong>Some text.</p>
<p style="font-weight: 400;"><strong>Members of Committee include</strong></p>
<ul style="font-weight: 400;">
<li>Member 1</li>
<li>Member 2</li>
<li>Group 1
<ul>
<li>Group 1a</li>
<li>Group 1b</li>
<li>Group 1c</li>
<li>Group 1d</li>
</ul>
</li>
<li>Member 3</li>
<li>Member 4</li>
<li>Member 5</li>
</ul>
</div>

Upvotes: 0

Views: 278

Answers (1)

Paulie_D
Paulie_D

Reputation: 115278

This .hand-bullet-list > ul > li:before works perfectly. I'd suggest your problem lies elesewhere.

.hand-bullet-list ul {
  list-style-type: none;
  margin-left: 0px;
}

.hand-bullet-list ul li {
  list-style: none;
  position: relative;
  padding: 0 0 22px 40px;
  margin-bottom: 20px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.hand-bullet-list>ul>li::before {
  background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
  content: "";
  width: 40px;
  height: 42px;
  position: absolute;
  left: 0px;
  top: 0px;
}
<div class="hand-bullet-list bullet-list-two-columns">
  <p><strong>Committee<br />
</strong>Some text.</p>
  <p style="font-weight: 400;"><strong>Members of Committee include</strong></p>
  <ul style="font-weight: 400;">
    <li>Member 1</li>
    <li>Member 2</li>
    <li>Group 1
      <ul>
        <li>Group 1a</li>
        <li>Group 1b</li>
        <li>Group 1c</li>
        <li>Group 1d</li>
      </ul>
    </li>
    <li>Member 3</li>
    <li>Member 4</li>
    <li>Member 5</li>
  </ul>
</div>

Upvotes: 2

Related Questions