CODEWITHSUNDEEP
xmlcsscss-selectorsxml-namespaces
Daniel Davis
Daniel Davis

Reputation: 13

Using multiple CSS on one XML with same element names

Currently I'm using the listed XML file and have the following two CSS files attached. I can't quiet figure out why, but when I add the prefix in the CSS file it then completely ignores the formating for that area.

XML file: 

<?xml-stylesheet type="text/css" href="menu.css" ?>
<?xml-stylesheet type="text/css" href="recipe.css" ?>

<men:menuItem xmlns:men="http://example.com/chestershartland/menu"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://example.com/chestershartland/menu menu.xsd">
<men:itemName>Oatmeal Breakfast</men:itemName>
<men:description>
 <![CDATA[Our oatmeal is served warm with fresh fruit, pecans, raisins,
  and 100% maple syrup. Available all day.
 ]]>
 </men:description>
     <men:price>6.95</men:price>
     <men:icon>&#9824;</men:icon>  
    <men:icon>&#9829;</men:icon>

<rec:recipe xmlns:rec="http://example.com/chestershartland/recipe" xsi:schemaLocation="http://example.com/chestershartland/recipe recipe.xsd">

  <rec:itemName>Oatmeal Breakfast</rec:itemName>
  <rec:ingredients>
     <rec:ingredient>1/3 c steel cut oats</rec:ingredient>
     <rec:ingredient>1-1/4 c water</rec:ingredient>
     <rec:ingredient>1/4 t salt</rec:ingredient>
  </rec:ingredients>
  <rec:directions>
  <![CDATA[Bring water to a boil. Add salt and oats, stir, and lower heat
     to lowest setting. Cover and let stand 2 hours.
  ]]>
  </rec:directions>

First CSS File

@namespace men "http://example.com/chestershartland/menu"

menuItem {
display: block; 
width: 680px; 
font-family: Garamond, "Times New Roman", Times, serif; 
font-size: 12pt; 
margin: 5px; 
padding: 15px;
}
men|itemName {
display: block; 
margin-top: 10pt; 
margin-left: 15pt; 
font-weight: bold; 
color: purple;
}
men|description {
display: block; 
margin-left: 40px;
}
icon {
display: inline-block; 
color: green;
}
price {
margin-left: 35pt; 
display: inline-block; 
color: blue;
}

Second

@namespace rec "http://example.com/chestershartland/recipe"

recipe {
display: block;
margin-left: 20px;
margin-top: 20px;
border: 1px solid purple;
background: ivory;
padding: 10px;
}
rec|itemName {
display: none;
}
ingredient {
display: block;
color: green;
}
rec|directions {
display: block;
color: black;
margin-top: 10px;
}

What am I doing wrong? If I don't put the rec or men in CSS, then everything just follows recipe.css rules regarding itemName and Description.

Upvotes: 1

Views: 276

Answers (1)

BoltClock
BoltClock

Reputation: 723648

There are two issues here:

  1. Your @namespace rules are missing semicolons.

  2. All of your elements are namespaced, but your namespace prefixes are inconsistent. When dealing with namespaced elements, every selector needs to be namespaced in the CSS, just like in the XML.

Since you have one stylesheet for each namespace, your life becomes much easier: you don't need to have namespace prefixes in your CSS. You can simply specify each namespace as the default namespace for each stylesheet, and every selector that doesn't have a namespace prefix will use the default namespace for that stylesheet. You declare a default namespace by leaving out the identifier, so it's just @namespace followed by the namespace URI.

menu.css

@namespace "http://example.com/chestershartland/menu";

menuItem {
    display: block; 
    width: 680px; 
    font-family: Garamond, "Times New Roman", Times, serif; 
    font-size: 12pt; 
    margin: 5px; 
    padding: 15px;
}
itemName { /* Only applies to men:itemName elements */
    display: block; 
    margin-top: 10pt; 
    margin-left: 15pt; 
    font-weight: bold; 
    color: purple;
}
description {
    display: block; 
    margin-left: 40px;
}
icon {
    display: inline-block; 
    color: green;
}
price {
    margin-left: 35pt; 
    display: inline-block; 
    color: blue;
}

recipe.css

@namespace "http://example.com/chestershartland/recipe";

recipe {
    display: block;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid purple;
    background: ivory;
    padding: 10px;
}
itemName { /* Only applies to rec:itemName elements */
    display: none;
}
ingredient {
    display: block;
    color: green;
}
directions {
    display: block;
    color: black;
    margin-top: 10px;
}

Upvotes: 1

Related Questions