Trying to target a UL in a DIV with some CSS (I can't create a class though)

Question

<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>

I am trying to make the indentation zero.

Usually, this is very simple like:

ul {
    padding: 0;
}

However, there are other UL items on the same page and I do not have control in being able to add a class to the UL I am trying to target.

I thought that this would work but it didn't:

ul.facetwp-selections {
    padding: 0;
}

And I tried this too:

facetwp-selections.ul {
    padding: 0;
}

Any other way to target the UL in the parent DIV?

Thanks

Answer 1

.facetwp-selections > ul{
    padding: 0;
  
}

<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>
<div class="facetwp-selections2">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>

try like this, here is the actual parent's child CSS syntax, for more referparents child css

And here is working fidlle link

Answer 2

Your css should be something like

.facetwp-selections ul {
  padding: 0;
}

.facetwp-selections ul {
  padding: 0;
}

<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>