Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Different coloured LI elements?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #196003
    ckubs
    Participant

    I want to have an unordered list with each LI element having it’s own background color.

    I know to do that using :child pseudoelement:

    ul li:nth-child(1){ background-color: #ffcc00;}
    ul li:nth-child(2){ background-color: #dddddd;}
    … so one.

    My question, if someone could answer, is as follow. There is an automated way to do that via CSS or donno, if it’s not possible at least via CSS and jquery? I use wordpress and for example if I want to make an list with 20 elements to avoid the case where I would have 20 CSS LI declarations.

    Thank you.

    #196015
    Paulie_D
    Member

    My question would be “why all different colors?”.

    That would be a very distracting element on a webpage.

    How would the user know what colors mean what…do they even mean anything?

    Plus…in actuality you’d probably have to multiply the number by at least 3 to reflect the different states of the menu items.

    20 menu items…if you have that many I’d suggest you have bigger issues than color.

    I’d pick a simple palette and stick to it.

    #196018
    Shikkediel
    Participant

    I recall this being made not too long ago :

    http://codepen.io/Lewiscowles1986/pen/zxBbGz

    #196051
    ckubs
    Participant

    There is no menu. I want to make top 10, top 5 lists …etc, the best( SF movie for example) being first with red background. And I plan to use light colour shades or rgba transparency.

    #196053
    ckubs
    Participant

    Thank you. That thing works. And I guess the problem is solved.

    #196108
    ckubs
    Participant

    Hello. Found a better way in therms of looks for my problem and for now skipped the multi colours part.
    I thought it would be nice to post a link with the final result.
    http://goo.gl/UUAfbh

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.