css syntax

[jimmyshoes]

Just wanted to check the following

If I wish to set a <div> of class 'label' to a certain width
is the following correct and reliable. I am unsure about mixing different selectors and if this is advisable in terms of compatibility with different browsers

#main .generalForm div .label { width:30px }

 

[BigRed1212]

I wouldn't think so.

Why wouldn't you just use

.label {
width:30px;}

or better yet

div.label {
width:30px;}

??


What you have now is a style that is applied to any element of the class label that is inside a div that is inside an element with the class generalForm that is inside an element with the id main. Seems a little much.

 

[Vragabond]

Probably not correct and definitely not reliable.

Your selector says:

An element with a class of label that is inside another div element, which is inside an element with a class of generalForm, which is inside an element with an id of main.

The error could be the space between the div and the dot in label. As is, it requires another div element. Without the space, it means div element with a class of label.

The not smart part is the specificity of this selector. You're limiting your selector to only apply it to the element when it is found within those specific circumstances. On the other hand, because this selector is so specific, it would require an even more specific selector to overwrite it. This could make your CSS very bloated.

Finally, classes were meant to be used multiple times on a single page. If .label can appear many times on the page, it is very restrictive of you to force it to be only within that set of elements.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]