Nick Jones

a magento developer at Meanbee (@nickj89) and uk magento expert based in Bath

CSS Boolean Selectors

Just a short one.

Have you been in the situation where you’d like to be able to enable a style only when both classes are defined for an element? For example:

<ul>
    <li class="level-0">Home</li>
    <li class="level-0">Electronics</li>
    <li class="level-1">Televisual Boxes</li>
    <li class="level-1 over">Kettles</li>
    <li class="level-0">Furniture</li>
    <li class="level-0">Clearance</li>
</ul>

We’ll ignore the fact that we could have used the :hover pseudo-class, and that we could have used an additional <ul></ul> to define the level-1 items.

Logical AND (&&)
We can invoke a specific over CSS class on only the level-1 items with the following:

li.level-1.over {
    background-color: red;
}

Keeping adding additional class by chaining with the .className syntax.

Logical OR (||)
Of course, to OR the classes you simply comma-separate them:

li.class1, li.class2 {
    background-color: green;
}

http://stackoverflow.com/questions/2144751/combining-two-or-more-css-selectors-with-a-boolean-condition

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">