<html>
<head>
<title>CSS Pseudo-class styling information presentation - RJM Programming - May, 2022</title><style>
option:hover::before {
content: ' (Population Order ' attr(value) ': ' attr(data-population) ') '; font-size: .7em;
}
option:active::after {
content: ' (Area Order ' attr(data-value) ': ' attr(data-area) ' km\0000B2 ) '; font-size: .7em;
}
</style>
<script type='text/javascript'>
function jsway(osel) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
alert('Capital city of ' + osel.innerHTML + ' is ' + osel.getAttribute('data-capital'));
} else {
for (var i=0; i<osel.length; i++) { if (osel.options[i].selected) { alert('Capital city of ' + osel.options[i].innerHTML + ' is ' + osel.options[i].getAttribute('data-capital')); } }
}
}

function onl() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
var ih=document.body.innerHTML;
var ist='<style>' + document.head.innerHTML.split('<style>')[1].split('</style>')[0].replace(/option/g, 'div').replace(':active::',':hover::') + '</style>';
document.body.innerHTML=ih.replace(/option/g,'div').replace(/select/g,'p').replace(/\<\/dJUNKiv\>/g,'</div><br>').replace(/\ data\-capital/g,' onclick=jsway(this); data-capital') + ist;
}
}

</script>
</head>
<body onload='onl();'>
<h1>Australian State/Territory</h1>
<h3>CSS Pseudo-class styling information presentation</h3>
<h4>Thanks to <a target=_blank href='//en.wikipedia.org/wiki/States_and_territories_of_Australia' title='States and territories of Australia - Wikipedia'>States and territories of Australia - Wikipedia</a></h4>
<select style='width:420px;' onchange="jsway(this);" size=8>
<option data-capital='Canberra' data-area='2,358' data-population='430,469' data-value='8' value='7'>Australian Capital Territory</option>
<option data-capital='Sydney' data-area='809,952' data-population='8,186,789' data-value='5' value='1'>New South Wales</option>
<option data-capital='Darwin' data-area='1,419,630' data-population='245,865' data-value='3' value='8'>Northern Territory</option>
<option data-capital='Brisbane' data-area='1,851,736' data-population='5,240,520' data-value='2' value='3'>Queensland</option>
<option data-capital='Adelaide' data-area='1,044,353' data-population='1,772,787' data-value='4' value='5'>South Australia</option>
<option data-capital='Hobart' data-area='90,758' data-population='540,839' data-value='7' value='6'>Tasmania</option>
<option data-capital='Melbourne' data-area='237,657' data-population='6,643,062' data-value='6' value='2'>Victoria</option>
<option data-capital='Perth' data-area='2,642,753' data-population='2,685,165' data-value='1' value='4'>Western Australia</option>
</select>
</body>
</html>