Simple CSS logical AND trick I never knew

April 1, 2012 Russell Waite 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>

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”

Jeff Griffith says:

September 28, 2012 at 4:00 pm

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:
  
  September 29, 2012 at 7:50 pm
  
  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.

Astute Logic

Simple CSS logical AND trick I never knew

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