Rustam Bainazarov

Да, именно так и работает nth-of-type. То есть и иными словами, на CSS эту задачу в чистом виде выполнить нельзя.

Но можно хаком:

button[value="selected"] {
  background: green;
  /* Все элементы с этим атрибутом */
}

button[value="selected"] ~ button[value="selected"] {
  background: red;
  /* Элемент, который идет после предыдущего с этим атрибутом и содержащий его же */
}

С учётом того, что у вас их всего два, то это будет работать нормально. Более того, с учётом этого же аспекта можно даже выбрать элементы по середине (так же хаком):

Field — это атрибут, и он тоже может быть CSS-селектором.

/* Все input'ы */
input {
  color: black;
}

/* Все с input'ы атрибутом field и любым его значением */
input[field] {
  color: green;
}

/* Если пустое значение атрибута field */
input[field=""] {
  color: red;
}

/* Если конкретное значение атрибута field */
input[field="конкретный"] {
  color: blue;
}

От легких обрывов анимации при быстром наведении/отведении никуда не деться, ибо мы меняем значение свойства transform-origin, чтобы сделать ваш эффект. Его (transform-origin) в данном случае анимировать не стоит вовсе, иначе вообще вся анимация ломается.

Можно без JS так сделать:



Ну как без JS... там по клику надо будет получать нужный рейтинг.

Можно сделать на CSS (IE11+).

Как все изображения товаров сделать квадратными? — подробное описание.

Если для нормальных браузеров, то так и через один псевдоэлемент:


Если для браузеров а-ля IE11 (+ всех нормальных), то так и через два псевдоэлемента:

Общие классы или data-атрибуты добавить нельзя им всем?

Ну а так — что-то наподобие этого как вариант:

$('[class*="slideToggle-"]').on( "click", function() {
  $(this).find('[class*="toggle__content-"]').slideToggle(); 
});

Думаю, соотношение всего будет несложно понять. В примере эмуляция gap'а в 20px. На flex'ах сейчас только так можно. Gap для flex'а планируют позже, кстати.

Потому что такой синтаксис комментариев в CSS недопустим. Он вам и рушит CSS.

Я про:
// комментарий

Вы явно скопировали код для препроцессора а-ля SASS. В CSS комментарии имеют исключительно следующий синтаксис:
/* CSS-комментарий */
https://developer.mozilla.org/ru/docs/Web/CSS/%D0%...

Заменил на нормальные комментарии, и всё заработало:

Можно без фиксированной высоты синего блока и без absolute'а. Старый-добрый отрицательный margin + дополнительный padding сверху на размер border-radius.



Вообще, оную задачу можно решить множеством способов.

Update. В данном конкретном случае, т. к. макет из вопроса отличается от того, что вам нужно, то, модифицируя ваш код, можно так, например:



Обратного закругления в CSS нет. Только визуальными хаками это можно сделать.

…и когда добавят возможность ставить дизлайки на ответы?

Тогда, когда добавят возможность ставить дизлайки за вопросы.

Обычно все подобные иллюстрации ищутся по запросу flat illustration, какого-то иного обозначения я не встречал.

Можно через CSS сделать. Решение работает, начиная с древнего IE11 (т. к. без object-fit). Плюс, картинки не будут подвержены лишней обработке на сервере. Код включает в себя всевозможные хаки для разных браузеров.

Оно не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

Это ошибка не SASS, а исключительно CSS из-за того, что вы импортируете медиазапросы до объявления основных стилей, тогда как нужно делать наоборот.

Изучайте flex.

Например, так:


Или так:

Вот так не работает:

*:not(.cms-home-page) .block {

}

Поэтому так (да-да, пробелы тут не ошибка, селектор просто такой):

body :not(.cms-home-page) .block {

}

На iPhone сразу запустилось: