CSS selector to show top n child elements based on class conditions in parent element

I have a HTML layout where there is a panel with several child divs that have the class "field". Some of these child divs have the class "hide".

When the panel has the class "ShowSingleRow", I want to display only the top 4 child divs that do not have the "hide" class.

When the panel does not have the "ShowSingleRow" class, I want to display only top 8 child divs that do not have the "hide" class. This scenario is working here.

I have tried using CSS selectors such as :not(), :nth-child(), and :nth-of-type() to achieve this, but I am not getting the desired result.

I think the issue is with nth-of-type(-n+4), in the example shared below, I want to see "one two four five". It checks first four child divs and shows "one two four" (as div with value "three" has "hide" class). Is there a way it can check top 4 matching divs excluding the ones with "hide" class?

I am looking for a generic solution where child divs can vary in count.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.panel>.field {
  display: none;
}

.panel:not(.ShowSingleRow)>.field:not(.hide):nth-of-type(-n+8) {
  display: inline-block;
}

.panel.ShowSingleRow>.field:not(.hide):nth-of-type(-n+4) {
  display: inline-block;
}

<!-- language: lang-html -->

<div class="panel ShowSingleRow">
  <div class="field">one</div>
  <div class="field">two</div>
  <div class="field hide">three</div>
  <div class="field">four</div>
  <div class="field">five</div>
  <div class="field hide">six</div>
  <div class="field">seven</div>
  <div class="field">eight</div>
</div>

<!-- end snippet -->

Safari, and the next version of Chrome will support

.panel.ShowSingleRow>.field:nth-child(-n+4 of :not(.hide))

But there's no Firefox support yet, and other Chromium browsers may take some time to become available.