Web Biz

Here’s a CSS stylesheet tip that I learned today: the negation pseudo-class (meaning it is followed by a colon, like :focus or :visited).  What exactly is it?  Well, its basically the NOT part of an if statement, if you want to think of it that way.  It is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).

I have a form stylesheet that applies styles to all input elements when focused, but I didn’t want the styles to apply to input elements whose type equals ’submit’ or ‘button’ when focused.  So lets see how it works.

First, I define the style for all input elements:

1
2
3
4

form input, form textarea {
  width:200px;
  padding:1px;
}

To remove these styles (width and padding properties), I can override them later in my stylesheet using:

1
2
3
4

form input[type='submit'], form input[type='button']{
  padding:0px;
  width:auto;
}

This worked great.  I then continued to apply styles to input elements when focused:

1
2
3
4

form input:focus, form textarea:focus {
  color:#000;
  background-color: #EFEFEF;
}

But then, the problem came up with the color property - how do I negate it for the buttons?  I didn’t want to have to specify a color, becuase otherwise it removes the browser/OS styling to the button.  So, I did some research and realized there is negation pseudo-class for CSS (level 3).  Here is how I modified the above style declaration to not include buttons within my form:

1
2
3
4

form input:focus, form textarea:focus, form input:not([type='submit']), form input:not([type='button']) {
  color:#000;
  background-color: #EFEFEF;
}

Now, the styles are only applied to input and textarea elements whose type attibute does NOT equal ’submit’ or ‘button’ - pretty cool.