SolutionBot

CSS Selectors

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.

Monday, April 14th, 2008 at 9:00 pm and is filed under Browser Development, css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.