Different Colors Based on Position in List
The final change I want to make to the navigation menu, which was previously discussed in the last two posts, is to add a different color to each menu item.

Menu with different colors for border
On a static website which doesn’t change, this is easy. You can add a class (or an id would work also) to each item, then style each one independently.
HTML
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a href="#">Tutorials</a></li>
<li class="about"><a href="#">About</a></li>
<li class="news"><a href="#">Newsletter</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
CSS
.home a { border-color: #636393; }
.tutorials a { border-color: #B5222D; }
.news a { border-color: #D4953C; }
.about a { border-color: #609491; }
.contact a { border-color: #87A248; }
But on a dynamic site where the menus can change, such as a WordPress site, that does not work. You need a way to make the first item to be purple, the 2nd item to be red, the third item to be teal, etc.
With CSS3, there is a simple way to do this. If you use the pseudo-selector nth-child, you can specify each li item individually, then target the anchor tag inside.
li:nth-child(1) a { border-color: #636393; }
li:nth-child(2) a { border-color: #B5222D; }
li:nth-child(3) a { border-color: #D4953C; }
li:nth-child(4) a { border-color: #609491; }
li:nth-child(5) a { border-color: #87A248; }
Basically, this is saying the anchor (a) tag inside of the first li in a list, should be #636393, and then the 2nd, 3rd, 4th and 5th are also specified.
This is simple and works in the latest version of all modern browsers, including IE9! Unfortunately it does not work in IE8 and below. Many times, I am willing to let that slide, because I don’t consider the CSS3 enhancement crucial to the design. In this case, however, the color of the menu items is very important to the design and I wanted a solution that would work everywhere.
This problem can be solved by using javascript, but I wanted to see if there was a CSS only solution to my problem. I discovered a clever trick while I was searching for the answer. I really would like to credit the person who inspired this solution, but I lost the link to the blog post, so I can’t do that unfortunately.
li a { border-color: #636393; }
li+li a { border-color: #B5222D; }
li+li+li a { border-color: #D4953C; }
li+li+li+li a { border-color: #609491; }
li+li+li+li+li a{ border-color: #87A248; }
See all three solutions in the demo. (They all look the same, you need to view source to see the code differences.)
LIKE THIS WAY NTH CHID SYSTEM
http://jsbin.com/hodetifita/1/edit?html,css,output
-------------------------------------------------------------------------------------------------------------------
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
/* make all li elements green and 75% wide */
li {
float: left;
width: 75%;
background: green;
padding: 20px; /* for style */
margin-bottom: 20px; /* for style */
}
/* Make the 'even' ones 25% wide. */
li:nth-child(even) {
width: 25%;
}
/* Make every 'fourth' one 25% wide and have a red background */
li:nth-child(4n+1) {
width: 25%;
background: red;
}
/* Make every fourth one (starting from 1) adjacent sibling 75% wide */
li:nth-child(4n+1) + li {
width: 200%;
background:ORANGE
;
}
/* Make every fourth one (starting from 4) have a red background */
li:nth-child(4n+4) {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<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>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
READ MORE
--------------------------------------------------------------------------------------------------------------------
http://css-snippets.com/different-colors-based-on-position-in-list/
0 comments:
Post a Comment