Сжать переменные css-селекторы

Question

Есть ли способ сжать этот css-селектор?

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;
}

Я бы сэкономил мне кучу кода!

РЕДАКТИРОВАТЬ
Вот полный CSS, который мне нужно сжать как можно меньше кода:

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

Ответ полностью зависит от вашей разметки. Прежде всего, если вы уже используете ID, вам не нужно указывать это имя элемента или имя класса, поскольку только один элемент может иметь этот ID. Так что form#finche-node-form - это то же самое, что и #fince-node-form, учитывая, что никогда не будет элемента этого идентификатора, который не является формой.

#finche-node-form.node-form имеет смысл, если вы хотите применять стили только тогда, когда форма имеет этот класс, и, возможно, другой стиль, когда у нее есть другой класс. Однако, если ваша форма всегда будет иметь этот класс или если вы всегда хотите применить этот стиль к форме, независимо от того, имеет ли она этот класс, вы можете использовать только #finche-node-form.

Остальная часть вашего кода выбирает 8 различных полей ввода. То же самое можно сказать о них. #input#edit-field-address-und-6-name.form-text может быть безопасно уменьшено до #edit-field-address-und-6-name.

Теперь, реальная экономия пространства была бы, если бы вы могли найти способ нацеливаться на все 8 полей, без написания отдельного селектора для каждого, что у вас есть здесь. Это полностью зависит от того, как выглядит ваша разметка. Если эти 8 полей являются вашими единственными полями ввода в форме, возможно, вы можете сделать с #finche-node-form input. Или, если есть другие элементы, но только эти 8 имеют класс form-text, то вы можете сделать с #finche-node-form .form-text.

Если вы действительно хотите применить этот стиль к всем экземплярам .form-text, тогда вы можете просто написать

.form-text { width: 493px; }

Итак, все сводится к тому, каковы ваши фактические требования. Вы не вставили ни одного фрагмента этого великолепного длинного селектора, который мы могли бы знать , чтобы его можно было безопасно удалить. Мы можем многое сделать, если предположим, что будет в безопасности, но только вы можете знать, какие части разметки будут меняться, и как вы хотите, чтобы ваш стиль вел себя в таком случае.

Ваши селекторы должны выражать ваше намерение. Ваш текущий селектор заставляет читателя думать, что вы хотите настроить таргетинг только на определенное подмножество элементов, только в пределах определенной формы, и что стиль должен применяться не всегда, а только в, возможно, редких условиях, когда форма имеет определенный класс, и входы имеют другой определенный класс. Если это действительно ваше намерение, то, возможно, текущий селектор не так уж и плох. Вы, вероятно, должны остановиться и подумать, когда ваш CSS-селектор делает код более многословным, чем добавление встроенного стиля (хотя все еще легче изменить, так что, эй).

Если то, что вы хотите донести до читателя вашего кода (другого разработчика или браузера), было на самом деле просто «эй, я только хочу убедиться, что все входные данные в этой форме имеют эту ширину», тогда это ваш селектор должен выразить.

Обновление

Хорошо, теперь, когда мы увидели ваш полный код CSS, мы можем проверить, что есть несколько разных экземпляров .form-text, которые имеют разные стили, поэтому применение одного стиля ко всем элементам этого класса, очевидно, выходит за рамки вопрос.

Некоторые другие вопросы:

• Является ли #finch-node-form чем-либо иным, кроме формы? В противном случае вы можете удалить начальную form часть селектора из каждого селектора.
• Случается ли когда-нибудь, что #finch-node-form не не имеет класс node-form? Если нет, вы можете удалить .node-form со всех селекторов.
• Существуют ли какие-либо элементы <div> в форме, которые когда-либо не должны иметь float и margin? Если нет, вы можете уменьшить этот последний селектор до form#finche-node-form.node-form div или, возможно, #finche-node-form div.
  • Если да, есть ли еще что-то уникальное для полей div, где вы хотите применить этот стиль? Например, если имеется много div с, но в указанном выше селекторе есть только , которые являются непосредственными потомками этой формы, и есть нет других div с, вы могли бы написать #finche-node-form > div { ... }
• Есть ли что-нибудь, что объединяет все 493px-текстовые поля и в то же время отличает их от всех полей 100px, 362px или 352px?Вообще ничего?Если это так, мы сможем нацелиться на это #finche-node-form > div:first-child > .form-text { ... } (например).

Самое важное: редактирование HTML исключено? В противном случае выможет просто вводить новые классы и применять к ним ваши стили

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

(Это ужасное имя класса, но вы поняли)

Answer 2

Вы можете использовать атрибут , начинающийся с селектора :

form#fiche-node-form.node-form input[id^="edit-field-address-und"].form-text {
    width: 493px;
}

Я предполагаю, что у вас нет других элементов, которые также имеют идентификатор, начинающийся с edit-field-address-und.

Answer 3

Использование препроцессора CSS, например LESS :

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