Simple CSS logical AND trick I never knew
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 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…
Hi, guest!
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”.
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 🙂