9/20 — прошу оценить что не так!

В частности интересует работоспособность связки: li:not(.nine)… Заранее признателен!

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:not(.nine) {
margin-left: -15px;
}

li:not(.nine) {
width: 36px;
height: 54px;
}

li.nine {
margin-right: 30px;
margin-left: 15px;
}

ul:not(:last-of-type) .diamond:not(.nine) {
background-color: #0099ff;
}

.seven:not(.club) {
background-color: #ff3300;
}

ul:nth-last-of-type(1) li:nth-last-of-type(3n-2) {
background-color: #339933;
}

Как у тебя вообще получилось с таким свойством?

li:not(.nine) {
width: 36px;
height: 54px;
}

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

Я не опытный верстальщик, но связака :not(.nine) мне кажется более красивой, чем :not(:nth-of-type(4))

Эта связка вполне работоспособна, но суть задания в проработке умения использовать именно селекторы группы nth-child.

Это испытание я уже разбирала подробно вот здесь.

Более того - у одного из пользователей при попытке решить испытание простыми селекторами по классам возникли большие проблемы - можете почитать вот здесь.

В первую очередь нужно решить поставленную задачу - научиться использовать селекторы группы nth-child.
Здесь не правильно отталкиваться от того, что селектор просто короче.

И вам советую почитать, какие проблемы это вызвало.