CSS selector: element without any its children

I have a nested unordered list with one "li" element defined with identifier: [data-main]

• 1 (must be selected)
  • 1.1
  • 1.2
• 2

using the following html:

<ul>
  <li data-main>1 (must be selected)
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

I'm trying to find the right CSS selector for selecting only element 1 without its children: 1.1 and 1.2. Selectors, I tried:

li:not([data-main]) - selects all li except main, but i need something opposite

[data-main]:not(:nth-child(1)) - selects nothing

https://jsfiddle.net/DaViking/dtqhag2t/