<!DOCTYPE html>
<html lang="en-US">
<head>
<style media="screen and (any-pointer: fine)">
label{
color:red;
}
#fine{
color:green;
}
#coarse, #none{
color:#fff;
}
</style>
<style media="screen and (any-pointer: none)">
label{
color:green;
}
#none{
color:green;
}
#coarse, #fine{
color:#fff;
}
</style>
<style media="screen and (any-pointer: coarse)">
label{
color:blue;
}
#coarse{
color:green;
}
#none, #fine{
color:#fff;
}
</style>
</head>
<body>
<input id="test" type="checkbox">
<label for="test">Look at me!</label>
<p id="fine">You are using atleast one fine pointer Device</p>
<p id="coarse">You are using atleast one Coarse pointer Device</p>
<p id="none">You are using no pointer Device</p>
</body>
</html>