Menu

Simple CSS logical AND trick I never knew

2 Comments

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 div.one { color:#F00; }

To style just the first div with classes “one” and “two” its simply div.one.two { 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:

    from http://www.w3.org/TR/CSS2/selector.html
    DIV.warning
    ==> Language specific. (In HTML, the same as DIV[class~=”warning”].)

    and

    E[foo~=”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 (http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/) 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.