tabIndex as a css property?

Question

I am trying to figure out how to use the HTML property tabindex through css.

I specifically want to add tabIndex=0 to all the div elements that contain a className='my-checkbox'.

This is what I have:

<div tabIndex="0" className="my-checkbox">
...
<div>

Since my <div className="my-checkbox"> is repeated multiple times across my application, I don't want to explicitly define the tabIndex property every time; thus I am looking for a way to avoid code duplication.

How can I add a tabIndex=0 property to all the div elements that contain a className="my-checkbox"?

I tried to add the following css rule, but that didn't work:

div .my-checkbox-img {
   tab-index: '0'
}

This adds a tab-index style that seems to not be functional; Google Chrome debugger shows it as an unknown property.

I tried nav-index but that seems to be deprecated as well.

To sum my question in threefold:

1. What's the difference between styles and properties? I was looking for something more detailed than this SO answer.
2. How are html properties related to css attributes (such as tabIndex to tab-index and so on)?
3. How can I add a tabIndex=0 property to all the div elements that contain a className="my-checkbox"?

Answer 1

1. What's the difference between styles and properties?

Generally speaking, they are two separate ways of manipulating an element's behavior. There is some ad-hoc overlap between some specific attributes and CSS properties (and of course, CSS properties can be set via the style attribute), but other than that, they are mostly independent. For more info have a look at HTML attribute reference and CSS reference.

This is because HTML with attributes came first (around 1993), and then CSS was invented later (around 1996, with a long adoption period). HTML attributes generally define "basic" or "inherent" properties of an element, like the src of an image or script element. A classic table can also have much of its style controlled by separate attributes, because this was needed before CSS became popular.

So yes, it's become a bit of a mess over the years.

2. How are html properties related to css attributes

As above, they generally aren't related, except in specific cases like <img width> that you linked to.

3. How can I add a tabIndex=0 property to all the div elements that contain a className="my-checkbox"?

This particular case is something you can't do using CSS. You should just add it to the markup, dynamically generating the attribute on the server side if possible, or (IMO this is a worse solution) using JavaScript after the page loads.

Answer 2

tabindex is attribute only, can't be set via CSS, unlike, for example, SVG presentation attributes. Just adding this answer to cut to the chase. Also, it's all lowercase.