css classes not working

[Swami]

After getting an xml (html) document via the Xhrlo object, it seems
like the class attributes are not being recognized. Any attempt to
apply styling to the resulting DOM elements (using their class
attributes) doesn't work.

see my code below:

js code:

ts4isha2.getDocument = function(url) {
var xhr = new goog.net.XhrIo();
goog.events.listen(xhr, goog.net.EventType.COMPLETE, function(e) {
var xhr = e.target;
var doc = xhr.getResponseXml();
ts4isha2.displayXml(doc);
});
xhr.send(url);
};

ts4isha2.displayXml = function(doc) {
var transcript = goog.dom.xml.selectSingleNode(doc, "//div[1]");
goog.dom.appendChild(goog.dom.$('segs'), transcript);
};

var url = "m-49-4-transformed.html";
var doc = ts4isha2.getDocument(url);

imported doc:

<?xml version="1.0" encoding="utf-8" ?>
<div class="transcript">
<div class="superSegment">
<div class="superSegmentHeading">
<span>
<img src="../assets/process.png"/>Process: </span>

</div>
<tag type="markupType" value="process"/>
<div class="segment">
<span class="content">(Process happening</span>
</div>
<div class="superSegment">
<div class="superSegmentHeading">
<span>
...
...

css:

.content{
font-family:courier;
}

.superSegmentHeading{
font-size:20;

div.transcript{
color:purple;
}

also if I change the xpath expression in the selectSingleNode function
to :
var transcript = goog.dom.xml.selectSingleNode(doc, "//div[@class eq
'transcript']");
then it doesn't return anything

Thanks in advance for any help on this

Kind Regards

Swami