How to add an image to xml sheet using css - css

Question

How would I add a small triangle image located locally on my machine at that location to the beginning of the table line?
Heres my CSS
stock:nth-child(1){
display:table-row;
content: url('..\stock\down.gif');
color:red;
}
And the corresponding XML
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
Here is a much much better way to write the css
stock[class~=down]{
border-bottom: 2px solid black;
display:block;
background: url("down.gif") no-repeat;
color:red;
}

Answer 1

It's a lot easier to do this with XSLT, where you can run a foreach across each of the children in your file and apply styles from a spreadsheet, but you can do this with XML and CSS. You'll need to set the headers in your xml file, and then call the stylesheet, like so:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
Then you just need to modify your CSS file to make whatever changes you like.
For instance:
(Edit for image):
stock {
display:block;
margin-left:20px;
}
symbol {
display: list-item;
list-style: url("..\stock\down.gif");
}
company {
display: list-item;
list-style: url("..\stock\down.gif");
}
You can then change this how you like, in the same way you'd style for HTML