Forum Moderators: not2easy
I'm doing a WP Templates so that everyone can use
and when the user Input more than 8 category than It's make an Automatically new small color on the left, sorry for my bad English
It will be very nice from you if you Help..
Thank you
[edited by: swa66 at 10:53 pm (utc) on May 4, 2009]
[edit reason] No personal URLs please see ToS and forum charter [/edit]
I'm not entirely sure what you seek to happen when there are more entries, nr how you achieve it now.
There are a number of ways to add different colored "tags" to a list.
The thing is that you need to be able to target the individual items in the menu and the big problem there is the lack of support for CSS3's nth-child pseudo selectors as defined in the future standard.
[w3.org...]
So, that leaves you stuck with adding lots of classes on the individual items,
or using a trick with the sibling selector and specificity:
The trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {
width: 5em;
list-style: none;
}
.menu li {
border: 1px solid black;
margin:2px;
padding-left: 5px;
border-left-width: 5px;
border-left-style: solid;
}
.menu li,
.menu li+li+li+li+li+li+li+li {
border-left-color: red;
}
.menu li+li,
.menu li+li+li+li+li+li+li+li+li {
border-left-color: orange;
}
.menu li+li+li,
.menu li+li+li+li+li+li+li+li+li+li {
border-left-color: yellow;
}
.menu li+li+li+li,
.menu li+li+li+li+li+li+li+li+li+li+li {
border-left-color: lime;
}
.menu li+li+li+li+li,
.menu li+li+li+li+li+li+li+li+li+li+li+li {
border-left-color: aqua;
}
.menu li+li+li+li+li+li,
.menu li+li+li+li+li+li+li+li+li+li+li+li+li {
border-left-color: blue;
}
.menu li+li+li+li+li+li+li,
.menu li+li+li+li+li+li+li+li+li+li+li+li+li+li {
border-left-color: fuchsia;
}
</style>
</head>
<body>
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</body>
</html>
The adjacent sibling selector is explained here:
[w3.org...]
BTW: IE6 doesn't support this at all, you need to teach IE6 how to do this with using e.g. IE7.js
Specificity [google.com] is what makes some entries (th emore specific ones) in the CSS win out over others when having conflicting statements.
The main problem is that I need to add more CSS depending on the length of the menu, :nth-child(an+b) could solve that for a very few browsers already.
