Мне ваш подход к nth-of-type кажется неверным.
Давайте попробуем прочитать селектор ul:nth-of-type(n) - “для каждого n-го ul”.
Т.е. по факту он выполняет то же самое, что и селектор ul - “для каждого ul”.
Но, если вы хотите обратится к li во всех ul, то даже просто ul можно опустить.
Раз уж мы прорабатываем сектор nth-of-type,
то вместо li:not(.nine) логично использовать li:not(:nth-of-type(4)), но это не критично для решения.
Теперь разберемся как сместить все вправо - у нас есть три селектора, отвечающие за деформацию или смещение:
- margin-left: -15px; - явно отвечает за наложение карт друг на друга.
- width: 36px; height: 54px; - уменьшает размер карты (примените к любому для проверки).
- margin-right: 30px; margin-left: 15px; - явно “раздвигает” карты.
/* Накладываем все карты друг на друга кроме 4-ой и 1-ой */
li:not(:nth-of-type(4)):not(:nth-of-type(1)) {
margin-left: -15px;
}
/* Уменьшаем размер всех карт кроме 4-ой */
li:not(:nth-of-type(4)) {
width: 36px;
height: 54px;
}
/* Раздвигаем все карты вокруг 4-ой */
li:nth-of-type(4) {
margin-right: 30px;
margin-left: 15px;
}
/* Выбираем все нечетные карты, среди них выбираем бубны */
li:nth-of-type(odd).diamond {
background-color: #0099ff;
}
/* Во всех строках, кроме 2-ой, выбираем семерки */
ul:not(:nth-of-type(2)) li.seven {
background-color: #ff3300;
}
/* В 4-ой строке выбираем каждую 3-ю карту */
ul:nth-of-type(4) li:nth-of-type(3n) {
background-color: #339933;
}