title: Selecting a class and first 3 of the rest; nth-child and nth-of-type useless
body: <p>I have a DOM element (#installations) with a number of children, only one of them has a class .selected. I need to select this class and the first 3 of the rest (:not(.selected)) and show them - the goal is to have only 4 elements shown, regardless of which element has the class .selected.</p>
  
  <p>The problem is, in the expression:</p>
  
  <pre class="lang-css prettyprint-override"><code>#installations &gt; *:not(.selected):nth-of-type(-n+3), .selected
  </code></pre>
  
  <p>:nth-of-type() disregards the :not() selector and just selects the first 3 children of #installation. For example, if I have this HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="installations"&gt;
      &lt;div id="one"/&gt;
      &lt;div id="two"/&gt;
      &lt;div id="three" class="selected"/&gt;
      &lt;div id="four"/&gt;
      &lt;div id="five"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I will only have one, two, three selected and not the first four. The logical implication is that :nth-of-type() will have only (one, two, four, five) to select from, since :not() already excluded the selected one, thus selecting (one, two, four), and then the other part of the selector <code>, .selected</code> will add the selected element. </p>
  
  <p>If .selected is not in the first four elements, let's say it's the sixth, we will have the first three + sixth elements selected.</p>
  
  <p><strong>To clarify: selecting .selected plus 3 adjacent elements is also fine. However, I this is also difficult in case .selected is in the last 3 (if we select the next 3 adjacent elements)</strong> </p>