---
title: "Formatera en xml-fil med css"
type: "forum-thread"
url: "https://www.webforum.nu/amne/xml/192422-formatera-en-xml-fil-med-css"
topic: "XML"
topic_url: "https://www.webforum.nu/amne/xml"
author: "Jompan"
published: "2014-09-02T14:28:37.000Z"
updated: "2014-09-04T15:44:23.000Z"
replies: 4
views: 4027
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/xml/192422-formatera-en-xml-fil-med-css"
---

# Formatera en xml-fil med css

## #1 — Jompan, 2014-09-02T14:28Z

Jag har knåpat ihop dessa koder:

\[DTD-kod\]
\<!ELEMENT guidningar (vskg, program+, beskrivning+)\>
		\<!ELEMENT vskg (namn, link)\>
			\<!ELEMENT namn (#PCDATA)\>
			\<!ELEMENT link EMPTY\>
				\<!ATTLIST link url CDATA #REQUIRED\>
		\<!ELEMENT program (titel, omfattning+, pris+, publik?, extra?)\>			
				\<!ATTLIST program typ (dramatiserad \| traditionell) #REQUIRED\>
				\<!ATTLIST program mobil (promenad \| buss) #REQUIRED\>
			\<!ELEMENT titel (#PCDATA)\>
			\<!ELEMENT omfattning (timmar+, antal+)\>
				\<!ELEMENT timmar (#PCDATA)\>
				\<!ELEMENT antal (#PCDATA)\>
			\<!ELEMENT pris (#PCDATA)\>
			\<!ELEMENT publik (maxantal+, minantal+)\>
				\<!ELEMENT maxantal (#PCDATA)\>
				\<!ELEMENT minantal (#PCDATA)\>
			\<!ELEMENT extra (#PCDATA)\>
		\<!ELEMENT beskrivning (#PCDATA)\>		

\[XML-kod\]
\<guidningar\>
	\<vskg\>
		\<namn\>Västra Sörmlands Kultur- och Guideförening\</namn\>
		\<link url="http://www.vskg.nu/guider.php/" /\>
	\</vskg\>

	\<program typ="dramatiserad" mobil="buss"\>
		\<titel\>Spökbussen\</titel\>
		
		\<omfattning\>
			\<timmar\>3\</timmar\>
			\<antal\>10\</antal\>
		\</omfattning\>	
		
		\<pris\>175\</pris\>
		
		\<publik\>
			\<maxantal\>30\</maxantal\>
			\<minantal\>15\</minantal\>
		\</publik\>
		
		\<extra\>Förtäring\</extra\>
	\</program\>

	\<beskrivning\> xxxxxxxxxxxx \</beskrivning\>	

\</guidningar\>

\[CSS-kod\]
guidningar {width:800px; margin:40px auto; border:1px solid black; padding:30px;}
vskg, program, beskrivning {display:block; margin:1ex 0; }

program, typ, mobil {display:block;}
namn{display:block; font-size:x-large; font-weight:bold;}
titel {display:block; font-size:large; font-weight:bold;}
omfattning, pris, publik, extra, beskrivning {display:block;}

Problemet är att sidan visar inte alternativen 'dramatiserad' och 'buss' under programtyp för ATTLIST.

Hur får jag fram den informationen?

// Jompan

Permalänk: https://www.webforum.nu/p/192422

## #2 — jarvklo, 2014-09-02T21:56Z

Hmm
Du kan t.ex. använda pseudo-attributen ::before eller ::after tillsammans med content: och attr()...

CSS-Exempel:

```
program {display:block; border:10px solid #abcdef;} /* kraftig ram för att illustrera */
/* Ledtext följt av ett värde */
    program::before {
        content: 'Typ: ' attr(typ) ;
    }
/* Flera värden och ledtexter */
    program::after {
        content: 'Typ: ' attr(typ) ' - Mobil: ' attr(mobil) ;
    }
```

Läs mer på t.ex. <http://css-tricks.com/css-content/>

Permalänk: https://www.webforum.nu/p/2317609

## #3 — Jompan, 2014-09-03T12:29Z

Tack, det blev ju helt perfekt.
Men så upptäcker jag ännu en skavank: hur kodar jag i CSS för att få fram länken som jag hänvisar till under XML-koden?
Jag försökte så här, men det blev inte så framgångsrikt.

a:before {
   content: attr(link url) "Västra Sörmlands Kultur- och Guideförening ";
}

Permalänk: https://www.webforum.nu/p/2317614

## #4 — jarvklo, 2014-09-04T12:48Z

Hmm - du har inget element som heter "a" i din dokumenttyp så den där CSS-selektorn har liksom inget den \*kan\* "hitta" i din dokumentstruktur ;)

Det du kan göra i CSS är alltså att ta ut värdet (som text) ur det element du selekterat.

```
link:before {
content: attr(url) " Västra Sörmlands Kultur- och Guideförening ";
}
```

 men du kan inte selektera "hierarkiskt" inne i attr() i CSS eftersom det som står inne i parentesen tolkas som ren text enligt spec.

Vill du börja ändra elementens namn i DOM-trädet, skjuta in a-element i DOM-trädet för att skapa länkar, eller kanske tillochmed få ut informationen ur ditt dokument i en helt annan ordning än i originalfilen är det XSLT som gäller (och en XSLT-mall \*kan\* generera ett HTML-träd komplett med en en regel som petar in en \<link rel="stylesheet" ... \> om du vill kombinera dem).

dvs kör du med 

```
<?xml-stylesheet type="application/xslt+xml" href="transformeramera.xslt"?>
```

 istället för att koppla in en css-fil så kan du välja att transformera en \<link url="xxx" /\> i ditt dokument/din DTD  till en \<a href="xxx"...\>...\</a\>

Permalänk: https://www.webforum.nu/p/2317618

## #5 — Jompan, 2014-09-04T15:44Z

Utmärkt!
Tack och bock för hjälpen.

// Jompan

Permalänk: https://www.webforum.nu/p/2317619

---

Tråden på webben: https://www.webforum.nu/amne/xml/192422-formatera-en-xml-fil-med-css