The ramblings of web developer Beau Brownlee

 
April 14th, 2008

CSS has many useful ways of getting the element you want to style. Most of us have seen using the ‘#’ sign to select your element by id or using ‘.’ to select an element with a specific class name. However there is a lesser known yet very helpful selector. CSS2 allows you to select an element based on any attribute using ‘[]‘ brackets.  This can be extremely helpful in many cases such as image titles, or form inputs. Instead of having a class name for each one of your form elements, why not save a little extra code (and precious bytes) and select your elements by using the following:

input[type="text"]{
border:solid 1px #C1D590;
color:#808080;
font-weight:bold;
font-family:arial;
font-size:14px;
width:200px;
}

As you can see, by selecting your text boxes with ‘input[type="text"]‘ can simplify your CSS code. Here’s a quick demo to show how useful this can be.

Tags: ,

Related Links

One Response to “CSS Selectors”

  1. Yates Says:

    Here’s another pretty sick implementation using javascript too…when is code comb going to be back up and running publicly?

Leave a Reply


cheap software