Question

Is there any way to compress this css-selector?

form#fiche-node-form.node-form input#edit-field-address-und-0-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-1-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-2-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-3-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-4-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-5-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-6-name.form-text,
form#fiche-node-form.node-form input#edit-field-address-und-7-name.form-text, {
    width: 493px;
}

I would save me a BUNCH of code!

EDIT
Here is the complete CSS I need to be compressed in as less code as possible:

form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-0-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-0-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-1-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-1-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-2-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-2-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-3-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-3-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-4-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-4-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-5-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-5-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-6-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-6-naam.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-7-naam.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-7-naam.form-text {
    width: 493px;
}

form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-0-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-0-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-1-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-1-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-2-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-2-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-3-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-3-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-4-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-4-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-5-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-5-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-6-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-6-straat.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-7-straat.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-7-straat.form-text {
    width: 352px;
}
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-0-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-0-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-1-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-1-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-2-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-2-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-3-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-3-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-4-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-4-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-5-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-5-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-6-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-6-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-7-gemeente.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-7-gemeente.form-text {
    width: 362px;
}

form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-0-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-0-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-1-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-1-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-2-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-2-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-3-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-3-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-4-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-4-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-5-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-5-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-6-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-6-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-bevoegde-adressen-und-7-postcode.form-text,
form#fiche-node-form.node-form input#edit-field-afl-dienst-adressen-und-7-postcode.form-text {
    width: 100px;
}



form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-0-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-0-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-0-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-0-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-1-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-1-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-1-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-1-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-2-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-2-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-2-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-2-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-3-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-3-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-3-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-3-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-4-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-4-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-4-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-4-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-5-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-5-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-5-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-5-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-6-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-6-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-6-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-6-telefoon,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-7-straat,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-7-nr,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-7-postcode,
form#fiche-node-form.node-form div.form-item-field-afl-dienst-adressen-und-7-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-0-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-0-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-0-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-0-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-1-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-1-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-1-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-1-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-2-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-2-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-2-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-2-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-3-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-3-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-3-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-3-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-4-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-4-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-4-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-4-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-5-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-5-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-5-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-5-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-6-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-6-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-6-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-6-telefoon,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-7-straat,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-7-nr,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-7-postcode,
form#fiche-node-form.node-form div.form-item-field-bevoegde-adressen-und-7-telefoon {
    float: left;
    margin-right: 20px;
}

Answer 1

The answer depends entirely on your markup. First of all, if you’re already using ID, you don’t need to qualify that with an element name or a class name, since only one element may have that ID. So form#finche-node-form is the same thing as #fince-node-form, given that there will never be an element of that ID that is not a form.

#finche-node-form.node-form makes sense if you only want to apply the styles when the form has that class, and perhaps another style when it has another class. However, if your form will always have that class, or if you always want to apply that style to the form, regardless of whether it has that class, you can do with only #finche-node-form.

The rest of your code selects 8 different input fields. The same thing can be said about them. #input#edit-field-address-und-6-name.form-text can probably safely be reduced to #edit-field-address-und-6-name.

Now, the real space saver would be if you could find a way to target all 8 fields, without writing a separate selector for each, which is what you have here. That depends entirely on what your markup looks like. If these 8 fields happen to be your only input fields in the form, perhaps you can do with #finche-node-form input. Or else, if there are other elements, but only these 8 have the form-text class, then you could do with #finche-node-form .form-text.

If what you want to do is actually to apply this style to all instances of .form-text then you could simply write

.form-text { width: 493px; }

So it all comes down to what your actual requirements are. There is not a single piece of that great long selector you’ve pasted that we can know to be safe to remove. There’s a great deal we can assume will be safe, but only you can know what parts of the markup will be able to vary, and how you want your style to behave when it does.

Your selectors should express your intent. Your current selector makes the reader think that you want to target only a specific subset of elements, only within a specific form, and that the style should not always be applied but only in the perhaps rare condition where the form has a certain class, and the inputs have another certain class. If that actually is your intent, then perhaps the current selector isn’t that bad. You should probably stop and think over things when your CSS selector makes the code more verbose than adding the style inline (although still easier to change, so hey).

If what you want to convey to the reader of your code (another developer or a browser) was really just “hey, I only want to make sure that all inputs in this form have this width”, then that’s what your selector should express.

Update

OK, now that we’ve seen your complete CSS code, we can verify that there are several different instances of .form-text that have different styles, so applying a single style to all elements of that class is obviously out of the question.

Some other questions:

• Is #finch-node-form ever anything other than a form? Otherwise you may remove the initial form part of the selector from every selector.
• Does it ever happen that #finch-node-form does not have the class node-form? If not, you may remove .node-form from all selectors.
• Are there any <div> elements in the form that should ever not have the float and margin? If not, you may reduce that entire last selector to form#finche-node-form.node-form div or perhaps #finche-node-form div.
  • If yes, is there anything else that is unique to the div fields where you do want to apply this style? For instance, if there are many divs, but the ones targeted in the above selector are only the ones that are immediate children of that form, and there are no other divs that are, you would be able to write #finche-node-form > div { ... }
• Is there anything that combines all 493px-textfields, and at the same time differentiates them from all 100px, 362px or 352px fields? Anything at all? If so, we may be able to target that #finche-node-form > div:first-child > .form-text { ... } (for instance).

Most important of all: is editing the HTML out of the question? Otherwise, you may simply introduce new classes, and apply your styles to them

#finche-node-form .width100-text-fields { width: 100px; }

(That’s a terrible class name, but you get the idea)