title: How to make the child's of a parent div focusable but not the grandchild divs?
body: <p>I would like to make all the children of the parent <code>div</code> focusable but not the grandchildren.</p>
  <p>Like this:</p>
  <pre><code>&lt;div class=&quot;parent&quot; &gt;
  &lt;div class=&quot;child1&quot; &gt; &lt;!-- should be focused--&gt;
  &lt;div class=&quot;grandchild&quot; &gt;&lt;/div&gt; &lt;!-- shouldn't be focused--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;child2&quot; &gt; &lt;!-- should be focused--&gt;
  &lt;div class=&quot;grandchild&quot; &gt;&lt;/div&gt; &lt;!-- shouldn't be focused--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;child3&quot; &gt; &lt;!-- should be focused--&gt;
  &lt;div class=&quot;grandchild&quot; &gt;&lt;/div&gt; &lt;!-- shouldn't be focused--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;child4&quot; &gt; &lt;!-- should be focused--&gt;
  &lt;div class=&quot;grandchild&quot; &gt;&lt;/div&gt; &lt;!-- shouldn't be focused--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;child5&quot; &gt; &lt;!-- should be focused--&gt;
  &lt;div class=&quot;grandchild&quot; &gt;&lt;/div&gt; &lt;!-- shouldn't be focused--&gt;
  &lt;!-- more divs--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Is it possible to do it with pure HTML, CSS?</p>
  <p>Does using <code>tabindex=0</code>on the parent div make all the children focusable? Or do I need to individually add a <code>tabindex</code> to each of the children?</p>
  <p>Using the tab button on keyboard</p>