CLASSy categories - CSS logic

[michaellunsford]

The idea is to have multiple categories represented as classes. Most divs will only have a single class (no big deal) but some will have multiples. When someone turns off one of the categories, the class will be marked as 'display:none;'. However, I want the div to remain visible as long as it retains at least one class that is visible.

 

consider the following:

<div class="cat3">1</div>
<div class="cat2 cat3">2</div>
<div class="cat2">3</div>
<div class="cat1">4</div>
<div class="cat1 cat2 cat3">5</div>

 

If the user decides they don't want to see "cat 3" items, '.cat3' will be marked as 'display:none;' -- however, '.cat1' and '.cat2' will still be 'display:block;' Is the best way to do this to just make sure that all 'display:block' declarations are also declared "!important;" ? Am I on the completely wrong track? What do you think?

[cssfreakie]

so to rephrase this in my words, as far as i understood the above:

 

you have some categories, some items can have more than 1 category.

if someone disables a certain category but that item falls in a category that is still active, than still show it.

If that is the case I, keep in mind that the last category will always win in terms of style that is being applied.

 

To counter this I would use javascript to check the classes and add another class to display or display not.

In that sense the category classes are pretty much empty ones purely to identify the item.

 

edit: so css could look like this:

        .cat1, .cat2, cat3 {background:red;} /* all have the same style or no style if they are just for selecting stuff */
        .display{display:block;}
        .hide{display:none;}

[michaellunsford]

Yeah, I've been through trying to get the CSS heavy method to work for the last few hours. Looks like you're right and I'll have to switch gears to javascript heavy. :-(

[cssfreakie]

Yeah, I've been through trying to get the CSS heavy method to work for the last few hours. Looks like you're right and I'll have to switch gears to javascript heavy. :-(

it's not possible with pure css, for the one reason that styles cascade. even the use of !important won't save you there

 

you might want to have a look in jquery for this:

http://api.jquery.com/addClass/

 

Good luck!