w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

ol reversed attribute

The reversed attribute on the ol element:


1.reversed="",  , reversed<ol reversed> ... <⁄ol>
<ol reversed=""> ... <⁄ol>
<ol reversed="reversed"> ... <⁄ol>

Video demonstration ol reversed attribute

HTML5 ol reversed attribute Tutorial

min video details
00:08 video tutorial: reversed attribute applied on ol element
objective: understanding reversed attribute and its values
00:18 in the next ordered list,

player A is on 1st position
player B is on 2nd position
player C is on 3rd position
00:28 let's say the last results bring:

- player C on 1st position &
- player A on 3rd position
00:37 we can manually change players place to reflect the new results
00:46 the ranked list is valid:
- player A on 3rd position &
- player C on 1st position
00:58 or we can use reversed attribute to reverse the ordinal value of the items: ascending → descending
01:06 the ordinal value of the items has not been reversed

reversed attribute is not supported in Mozilla Firefox v17.0.1
01:10 test in Google Chrome
01:15 note the descending order of the items given by the reversed attribute → a descending list
01:29 The VALUES of the reversed attribute
01:30 1. no value
- the presence of the reversed attribute on ol element → a descending list
- the absence of the reversed attribute on ol element → a ascending list
01:37 2. "" (empty string)
→ a descending list
01:50 3. reversed (attribute's canonical name)
→ a descending list
02:04 when reversed attribute is present on an ol:

the ascending ol
a descending ol
ol intro ol, optional, occurrences ol browser display ol parents - children ol vs ulol syntaxol start attributeol type attribute