title: tabIndex as a css property?
body: <p>I am trying to figure out how to use the HTML property <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex" rel="nofollow noreferrer"><code>tabindex</code></a> through css. </p>
  
  <p>I specifically want to add <code>tabIndex=0</code> to all the div elements that contain a <code>className='my-checkbox'</code>.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;div tabIndex="0" className="my-checkbox"&gt;
  ...
  &lt;div&gt;
  </code></pre>
  
  <p>Since my <code>&lt;div className="my-checkbox"&gt;</code> is repeated multiple times across my application, I don't want to explicitly define the <code>tabIndex</code> property every time; thus I am looking for a way to avoid code duplication.</p>
  
  <p>How can I add a <code>tabIndex=0</code> property to all the <code>div</code> elements that contain a <code>className="my-checkbox"</code>?</p>
  
  <p>I tried to add the following css rule, but that didn't work:</p>
  
  <pre><code>div .my-checkbox-img {
     tab-index: '0'
  }
  </code></pre>
  
  <p>This adds a <code>tab-index</code> style that seems to not be functional; Google Chrome debugger shows it as an <code>unknown property</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/nTH9C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nTH9C.png" alt="enter image description here"></a></p>
  
  <p>I tried <a href="https://www.quanzhanketang.com/cssref/css3_pr_nav-index.html" rel="nofollow noreferrer">nav-index</a> but that seems to be deprecated as well.</p>
  
  <p>To sum my question in threefold:</p>
  
  <ol>
  <li>What's the difference between styles and properties? I was looking for something more detailed than <a href="https://stackoverflow.com/q/3562296/1373465">this SO answer</a>.</li>
  <li>How are html properties related to css attributes (such as <code>tabIndex</code> to <code>tab-index</code> and so on)?</li>
  <li>How can I add a <code>tabIndex=0</code> property to all the <code>div</code> elements that contain a <code>className="my-checkbox"</code>?</li>
  </ol>