Easy Tutorial
❮ Pr Grid Template Columns Pr Grid Row Gap ❯

CSS3 nav-index Property

Example

Specify the Tab order for two buttons:

button#b1
    {
    top:20%;left:25%;
    nav-index:1;
    nav-right:#b2;nav-left:#b4;
    nav-down:#b2;nav-up:#b4;
    }
    button#b2
    {
    top:40%;left:50%;
    nav-index:2;
    nav-right:#b3;nav-left:#b1;
    nav-down:#b3;nav-up:#b1;
    }
    button#b3
    {
    top:70%;left:25%;
    nav-index:3;
    nav-right:#b4;nav-left:#b2;
    nav-down:#b4;nav-up:#b2;
    }
    button#b4
    {
    top:40%;left:0%;
    nav-index:4;
    nav-right:#b1;nav-left:#b3;
    nav-down:#b1;nav-up:#b3;
    }

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.

Property
nav-index Not compatible Not compatible Not compatible Not compatible Supported in Opera 11.5-12. <br> Not compatible with newer browser versions

Property Definition and Usage

The nav-index property specifies the sequential navigation order ("Tab order") of elements.

Default value: auto
Inherited: no
--- ---
Version: CSS3
--- ---
JavaScript syntax: object.style.navIndex=2
--- ---

Syntax

Value Description
auto The browser assigns the Tab order of the element
number Represents the Tab order of the element. 1 means first
inherit Specifies that the value of the nav-index property should be inherited from the parent element
❮ Pr Grid Template Columns Pr Grid Row Gap ❯