Question 46110 in CSS Question posted in
Some basic documentation can be found here.

I want to have a different color for list in odd number and even number. I don't understand why my code is not working – CSS

I need help. I have a few items in list and want odd number and even number to have a different color. I don’t want JQuery/Javascript. I only want CSS.

Here is my code.

<style>
a { text-decoration:none; }
.test ul { list-style-type: none;  }
.test li { display: inline-block; font-size:18px; color:#999; }
.test li a:nth-child(odd) { color:blue; }
.test li a:nth-child(even) { color:green; }

</style>

<ul class="test">
<li><a href="">Store 1</a></li>
<li>|</li>
<li><a href="">Store 2</a></li>
<li>|</li>
<li><a href="">Store 3</a></li>
<li>|</li>
<li><a href="">Store 4</a></li>
<li>|</li>
<li><a href="">Store 5</a></li>
</ul>

<ul class="test">
<li><a href="">Store 6</a></li>
<li>|</li>
<li><a href="">Store 7</a></li>
<li>|</li>
<li><a href="">Store 8</a></li>
<li>|</li>
<li><a href="">Store 9</a></li>
<li>|</li>
<li><a href="">Store 10</a></li>
</ul>
Tags:

2

Answers


  1. 0

    Basically, looking at your html code, the a elements are alwas the first and unique childs of the li elements…
    So, your selectors are wrong. These are the good ones:

    <style>
    a { text-decoration:none; }
    .test { list-style-type: none;  }
    .test li { display: inline-block; font-size:18px; }
    .test li:nth-child(odd) a { color:blue; }
    .test li:nth-child(even) a { color:green; }
</style>

    Cheers

    Login or Signup to reply.
  2. 0

    You should change the HTML like this:

    <ul class="test">
    <li><a href="">Store 1</a> | </li>
    <li><a href="">Store 2</a> | </li>
    <li><a href="">Store 3</a> | </li>
    <li><a href="">Store 4</a> | </li>
    <li><a href="">Store 5</a></li>
</ul>

<ul class="test">
    <li><a href="">Store 6</a> | </li>
    <li><a href="">Store 7</a> | </li>
    <li><a href="">Store 8</a> | </li>
    <li><a href="">Store 9</a> | </li>
    <li><a href="">Store 10</a></li>
</ul>

    And the CSS from:

    .test li a:nth-child(odd) {
    color: blue;
}

.test li a:nth-child(even) {
    color: green;
}

    to:

    .test li:nth-child(odd) a {
    color: blue;
}

.test li:nth-child(even) a {
    color: green;
}

    Full code:

    a {
    text-decoration: none;
}

.test ul {
    list-style-type: none;
}

.test li {
    display: inline-block;
    font-size: 18px;
    color: #999;
}

.test li:nth-child(odd) a {
    color: blue;
}

.test li:nth-child(even) a {
    color: green;
}
    <ul class="test">
<li><a href="">Store 1</a> | </li>
<li><a href="">Store 2</a> | </li>
<li><a href="">Store 3</a> | </li>
<li><a href="">Store 4</a> | </li>
<li><a href="">Store 5</a></li>
</ul>

<ul class="test">
<li><a href="">Store 6</a> | </li>
<li><a href="">Store 7</a> | </li>
<li><a href="">Store 8</a> | </li>
<li><a href="">Store 9</a> | </li>
<li><a href="">Store 10</a></li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search