Simple CSS logical AND trick I never knew

I never really thought about how to logically AND two classes however I stumbled across it this evening.  Its obvious really once you think about how classes are targeted for a particular element type.

Given the html

<div class="one two">...</div>

<div class=”one three”>…</div>

<p class=”one more”>…</p>

To style just the “one” divs the CSS is { color:#F00; }

To style just the first div with classes “one” and “two” its simply { color:#F00; }

Once you see it in black and white you wonder how you didn’t work it out, well I did anyway. You’ve already been doing a CSS logical AND when using elements and classes together…

2 thoughts on “Simple CSS logical AND trick I never knew”

  1. Jeff Griffith says:

    I’ve been researching conditional operators in CSS (I’m a coder, not a designer, so I’ve always been prohibited from looking at CSS at work), and I ran into this:

    ==> Language specific. (In HTML, the same as DIV[class~=”warning”].)


    ==> Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

    1. me says:

      There’s a great page on tutsplus ( that shows you 30 useful css selectors. The article says its the 30 you must remember, I just remember that the article exists and go back to it when my knowledge can’t get me to the solution 🙂

Comments are closed.