Пять сиблингов с разными классами и с общим родителем. Можно ли сделать краткую CSS запись например к двум из них?

Question

[Grayni Web]

Всем привет. Вопрос мб глупый. Но если есть способ, то мне бы это сократило много строк css кода. Сам пример:
HTML:

<div class="parent">
   <div class="blockOne">
   <div class="blockTwo">
   <div class="blockThree">
   <div class="blockFour">
   <div class="blockFive">
</div>

Можно ли сделать запись краткой, например, если мне нужно указать стиль для второго и четвертого блоков.
--Раньше было:
CSS:

.parent .blockTwo, .parent .blockFour {
//....
}

--Если есть способ (импровизация):
CSS:

.parent [.blockTwo, .blockFour] {
//....
}

(Способы типа .parent > div и т.д. не подходят)
Примеры упрощены. И может показаться незначительным, но когда сталкиваешься с wordpress CSS, то от удивления глаза начинают лезть на лоб. Многоэтажные строки с перечислением нескольких сиблингов (не всех) и по сути к каждому применен стиль по отдельности. Типа того :

#payment .payment_methods li .payment_box .wc-credit-card-form-card-cvc,
#payment .payment_methods li .payment_box .wc-credit-card-form-card-expiry,
#payment .payment_methods li .payment_box .wc-credit-card-form-card-number {
//...
}

Заранее спасибо за ответ.
П.С. Еще забыл добавить, способы типа чередования :nth-child не всегда уместны. В данном примере совпадение (применение к каждому второму).

Answer 1

[whoisthere]

Регулярные выражения

[class^='wc-credit-card-form-'] {
....
}

Comments

[Grayni Web]

При такой форме стиль применяется ко всем вложенным дочерним блокам с именем класса. А необходимо, только к классам, например, оканчивающихся на -cvc и -number

[whoisthere]

.wc-credit-card-form-card-cvc,
.wc-credit-card-form-card-number {
....
}

Тогда короче этой записи, сложно, что-то другое придумать.

[Grayni Web]

К сожалению, обращение через родительский элемент обязательно, так как игнорируя его, либо стили не переопределяются, либо переопределяют стили дивов с таким же классом, например, на других страницах. Но спасибо за ответ, будем довольствоваться теми возможностями, которые дает нам css.

[whoisthere]

#payment .wc-credit-card-form-card-cvc,
#payment .wc-credit-card-form-card-number {
....
}

Тогда достаточно написать так, если я Вас правильно понял.

[whoisthere]

Необязательно указывать полный путь к расположению класса.

[Grayni Web]

Да, наверно, надо будет изменять все подобным образом, спасибо.

Answer 2

[Алексей Сол]

Хм. Если известен порядок элементов и точно известно, что они не будут меняться местами/меняться количественно, то можно воспользоваться псевдоклассами :nth-child() или, если вы пишете, что это неприемлемо, то через :nth-of-type() выбирать конкретные по нумерации блоки.

Comments

[Grayni Web]

При таком подходе нет разницы между :nth-child() и :nth-of-type(). Приведу пример. У нас 20 вложенных div блоков, мне надо поменять стили, предположим, у 4, 5, 9, 15, 17. Если бы псевдокласс :nth-of-type() срабатывал вот так: .parent div:nth-of-type(4, 5, 9, 15, 17), то тогда бы это имело смысл, но используя его так как оно должно быть, то придется обращаться через родителя к каждому блоку, т.е. выйдет пять длинных строк кода через запятую вместо одной. Предполагаю что способа все таки нет.

Answer 3

[Ivan Bogachev]

Откройте для себя препроцессоры - less/sass

Относительно вот этого:

#payment .payment_methods li .payment_box .wc-credit-card-form-card-cvc,

если вы пытаетесь переопределять половину стилей WooCommerce - проще будет не подключать оригинальные стили и потом их переопределять, а сразу писать свои с нуля.

Comments

[Grayni Web]

Препроцессоры к сожалению я знаю поверхностно. Но ведь, он подразумевает краткую запись css? При этом при рендеринге страницы количество кода не уменьшится, поправьте если я не прав... Просто у меня количество строк стилей и так зашкаливает за 6000, и соответственно, вес файла стилей велик. На это ругаются тестовые анализаторы сайта, подобные PageSpeed.

[Ivan Bogachev]

Grayni Web: Да, в результате вы будете получать довольно длинный css, но ваш вопрос изначально звучит так, что вам сложно это писать - препроцессоры решают этот вопрос.

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

[Grayni Web]

А как определить какие стили не использует весь сайт? Пробовал плагином (не помню название) для FireFox отпарсить не используемые, но в итоге все равно пришлось все пересматривать. И есть ли способ как то находить дублирование классов стилей для определенных div в файле style.css и объединять, если они берут начало от разных предков. т.е.:
1) .grandParent .parent div {
background: red;
}
2) .parent div {
with: 300px;
}
Итог:
.grandParent .parent div {
background: red;
with: 300px;
}
Прошу прощения, за столько вопросов.