CSS | nav-index property
Last Updated :
30 Nov, 2022
The CSS nav-index define the sequential navigation order for each element. Same as other nav property does not contain the target-name attribute. The CSS nav-index is only supported by Opera 12.0. Syntax:
nav-index: auto | number | initial | inherit;
Attribute:
- auto: It is the by default value here the browsers define the order.
- number: It defines the tabbing order for the element.
- initial: It is the default value.
- inherit: It inherits from its parent element.
Below example illustrate the nav-index property:
Example:
html
<!DOCTYPE html>
< html >
< head >
< title >CSS nav-index Property</ title >
< link rel="stylesheet" href=
< style >
button {
position: absolute;
}
h1 {
color: green;
}
button {
background-color: #80ff80;
nav-right: auto;
nav-left: auto;
nav-down: auto;
nav-up: auto;
border-radius: 25px;
font-size: 20px;
}
#Geeks1 {
top: 35%;
left: 43%;
nav-index: 1;
}
#Geeks2 {
top: 50%;
left: 65%;
nav-index: 2;
}
#Geeks3 {
top: 65%;
left: 43%;
nav-index: 3;
}
#Geeks4 {
top: 50%;
left: 20%;
nav-index: 4;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h4 >CSS nav-index Property</ h4 >
< p >
Press the < samp >Shift</ samp >
key while navigating with the arrow keys.
</ p >
</ center >
< button id="Geeks1">Button
< i class="fa fa-arrow-circle-up"></ i >
</ button >
< button id="Geeks2">Button
< i class="fa fa-arrow-circle-right"></ i >
</ button >
< button id="Geeks3">Button
< i class="fa fa-arrow-circle-down"></ i >
</ button >
< button id="Geeks4">Button
< i class="fa fa-arrow-circle-left"></ i >
</ button >
< div >
</ div >
</ body >
</ html >
|
Output: Supported Browsers: The major browsers are not supported by CSS nav-index property Browsers Specific Extension: The css nav-index property has browsers specific extension.
- Google Chrome -webkit-
- Internet Explorer -ms-
- Firefox -moz-
- Safari -webkit-
- Opera -webkit-
Share your thoughts in the comments
Please Login to comment...