How can I express multiple CSS classes in the same div?

[irfanjadhav]

I have been using methods like changing font colors and background colours to express multiple attributes in a div, but this results in later rules overriding the expression of earlier ones.

I need a means of displaying each attribute in a manner that doesn’t clobber the others, such as getting a color block or a glyph to display in different parts of the block, eg if there are ten attributes to display then it would be a good idea to display 10 different shades with each one taking up a tenth of the width of the div, or display a background graphic text such as a small watermark character taking up one tenth of the width of the div.

An example of this would be a task that could be in a CLOSED, COMPLETED, or CANCELLED state. When a task is CANCELLED or COMPLETED state it also CLOSED state. What I am looking for is a means of having both CANCELLED or COMPLETED expressed as well as CLOSED but in means that do not override each other. Some states may be mutually exclusive such as those involving transition to successor states, but I would like the earlier states to be expressed as someof the successor states can be reached via different paths.

I need up to about 15 such states to be expressed. What is the usually means of doing this in CSS? Glyphs are the preferred means colours will not be expressed?

[WayneKenney]

Perhaps mixing CSS with JQuery may help with switching between states.

    if (state == 0)
    {
        // default state
        $(`.class`).css(`color`, `white`); // DEFAULT
    }
    else if (state == 1)
    {
        // completed state
        (`.class`).css(`color`, `green`); // COMPLETED
    }
    else if (state == 2)
    {
        // cancelled state
        (`.class`).css(`color`, `orange`); // CANCELLED
    }
    else if (state == 3)
    {
        // closed state
        (`.class`).css(`color`, `red`); // CLOSED
    }

[Author]

Posts