How to control what elements are targeted by the key TAB using pure CSS?

Question

Considering the following code:

button{background:yellow;}
button:focus{outline:red 5px solid;}

button:nth-of-type(1){color:green;}
button:nth-of-type(2){color:orange;}
button:nth-of-type(3){color:blue;}
button:nth-of-type(4){color:grey;}
button:nth-of-type(5){color:purple;}

<section>
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</section>

Note that when clicking on the key tab on your keyboard it make the focus jump from the first button to the next and so on all the way to the last before it moves to the browser elements.

My question is if is there a way to skip "Button 3" when focus is on "Bottom 2" and I press the key tab? I would be happy to know that there is a CSS property to control this but if not javascript solutions are also welcome.

Answer 1

You would be surprised, but this time it's actually not CSS or JS, but HTML doing the work.

button{background:yellow;}
button:focus{outline:red 5px solid;}

button:nth-of-type(1){color:green;}
button:nth-of-type(2){color:orange;}
button:nth-of-type(3){color:blue;}
button:nth-of-type(4){color:grey;}
button:nth-of-type(5){color:purple;}

<section>
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button" tabindex="-1">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</section>

---

Or with JS,

[].map.call(document.getElementsByClassName("no-tab"), function(e){ e.tabIndex = -1; });