0

In Safari (newest Version of El Capitan OS X) and in iOS 9 following code works, but I am uncertain why only here and not in latest versions of Chrome and Firefox on Mac OS X.

<section id="content" class='special-content'>
...
<article>
    <ul>
        <li>Headline
        <ul>
            <li>Explanation 1</li>
            <li>Explanation 2</li>
            <li>Explanation 3</li>
        </ul>
        </li>
    </ul>
</article>

Here is the problematic thing:

@media (min-width: 500px) {
    .special-content ul:not(ul li ul) { display: table; }
    .special-content ul li:not(ul li ul li) {
        vertical-align: middle;
        display: inline-table;
        border-spacing: 1rem;
        border: 1px solid #469A79;
    }
    .special-content ul li:not(ul li ul li) { margin-bottom: 0}
}

.special-content ul li:not(ul li ul li) { color: red; }
.special-content ul li:not(ul li ul li) ul li { color: green; }
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alexander Kazachkov
  • 9
  • 1

1 Answers1

0

You need to read about :not with multiple selector. 

.special-content ul li:not(ul):not(li):not(ul):not(li){ color: green; }

Ps: if this approach doesn't satisfy your problem. You should add class so you can generalize the ul li selector.

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80
  • Perhaps you need to read about it too - I'm not sure you understand what `li:not(ul):not(li):not(ul):not(li)` actually means. – BoltClock Jul 10 '16 at 15:49