CODEWITHSUNDEEP
htmlcss
Jordy Senssen
Jordy Senssen

Reputation: 171

Styling the span in an unordered list

I have bought a template with a tab tour element (kind of a menu that unfolds different content) and I wanted to change the color of the text inside the list. Each and every tab needs to have a different color. So first one red, second blue, third green and fourth yellow. I tried everything with childs, element, classes etc. but no result.

Here is one of the codes I tried

#one a
{
color:#e28844
}
<ul class='cmsms_tabs_list'>
  <li id="one" class="cmsms_tabs_list_item">
     <a href="#">
       <span>One</span>
      </a>
    </li>
  <li id="two" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Two</span>
      </a>
    </li>
  <li id="three" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Three</span>
      </a>
    </li>
  <li id="four" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Four</span>
      </a>
    </li>
  </ul>

Upvotes: 4

Views: 1189

Answers (1)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

You can add following style

.cmsms_tabs_list li:nth-of-type(1) a span {
     color : red;
}

.cmsms_tabs_list li:nth-of-type(3) a span {
      color : blue;
}

.cmsms_tabs_list li:nth-of-type(4) a span {
      color : green;
}

.cmsms_tabs_list li:nth-of-type(2) a span {
      color : yellow;
}

For reference - http://jsfiddle.net/s1s12w2x/1/

Upvotes: 3

Related Questions