I have been experimenting with a way to represent properties of an object in CSS. After reading some I learned that escaping can be used for special characters in ids and classes. I have tested the below and seems to be functioning, which is great. However, is there anything I might be overlooking (besides how convoluted it may look to most)?

disclaimer: I know this won't work in IE6 considering the last class is the only one IE6 will recognize. Lets put that aside.

I also wonder if jQuery will be alight with this. I'll have to test it out.

Thanks

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Test Escaping Sepecial Characters for CSS Selectors</title>
	
	<style type="text/css">
	.fapi\\element {
		width: 200px;
		height: 50px;
	}
	
	.fapi\\widget\\select {
		background-color: blue;
	}
	
	.fapi\\widget\\textfield {
		background-color: yellow;
	}
	
	.mdtlv\\view\\listing {
		width: 400px;
		height: 500px;
	}
	
	.mdtlv\\display\\list\:--mobile--default {
		background-color: black;
	}
	
	div[class^="mdtlv\\listing\\list"] {
		background-color: #ccc;
		width: 200px;
		height: 50px;
	}
	
	.obj\[prop\]\=value {
		width: 300px;
		height: 50px;
		background-color: violet;
	}
	</style>
	
</head>
<body>

<div class="fapi\element fapi\widget\select fapi\name\test">
</div>

<div class="fapi\element fapi\widget\textfield fapi\name\test-txt">
</div>

<div class="mdtlv\view\listing mdtlv\display\list:--mobile--default">
</div>

<div class="mdtlv\listing\list:-mobile-default">
</div>

<div class="obj[prop]=value">
</div>

</body>
</html>