Dynamic CSS with a variable parameter? (is it possible?)

Question

I'm trying to create a menu system, which is dynamically resizes itself horizontally to fill out depending on how many "li" entries there are, I'm dynamically creating the webpages with XSLT. My thoughts are whether this is possible todo within CSS?

Here's my CSS specifically for the HTML page

nav[role="navigation"] li {
    float: left;
    width: 10.00%;  /* I want to dynamically set this width */
}

Snippet of HTML in question

<nav role="navigation" count="2"><?xml version="1.0" encoding="utf-8"?>
  <ul>
    <li>
      <a href="movies.html">Movies</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
  <ul>
</nav>

My thoughts are of whether something like this would be possible to call the CSS with a parameter, or am I going against it's declarative ways?;

nav[role="navigation"] li param {
    float: left;
            switch(param)
            {
               case : 5
               {
          width: 20.00%;
               }
               case : 3
               {
          width: 33.33333%;
               }
            }
}

Answer 1

CSS is not a programming language. CSS3 has a bit of logic here or there, but no switch().

For your purposes, the simplest solution by far is a touch of javascript, supplied here assuming that you use jQuery:

var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length);  // add a class to every li indicating 
                                           // total number of list items

Then in your CSS:

nav[role=navigation] li { /* default styling & width */ }
nav[role=navigation] li.count2 { /* your conditional styling */ }
nav[role=navigation] li.count5 { /* your conditional styling */ }
/* etc */

or just set the width directly with jQuery:

$navLis.style('width', (100/$navLis.length)+'%');

If you demand pure CSS, then get out your logic hat and look over the CSS3 selectors specification. You can construct some Byzantine and rather brittle CSS code to fake logic, such as the following selector.

nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {
  /* matches last of two items if a list has only two items */
}

If you're using a CMS that knows how many items it is going to be putting in the list, then you can get fancy on your server backend by adding little bits of PHP to your CSS:

<?php header('Content-type: text/css'); 
  if (isset($_GET['navcount']) && $_GET['navcount'] != "") {
    $navcount = $_GET['navcount'];
  } else { $navcount = 5.0; } // Default value
?>
/* ... your css code here... */
nav[role="navigation"] li {
  float: left;
  width: <?php echo (100.0/$navcount); ?>%;
}

Then you request the CSS/PHP script like this from your HTML:

<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />

There's a few great tools out there for writing stylesheets that mix down nicely into CSS, and some even provide PHP implementations to do so dynamically. The strongest CSS extension right now is Sass, which has just the sort of syntax that you're looking for. I'd recommend using Sass through Compass, which is a framework for Sass that really gives it some teeth. You can parse Sass into CSS on-the-fly in PHP using phamlp

Although Compass (and Sass) are awesome tools, plugging them into an existing project could be more trouble than its worth. You might just want to do simple logic using Javascript.