9/20 100% Покритикуйте код плиз

Курсы §18. Селекторы. Часть 2
1 
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;
}

.cards li:not(:first-of-type) {
margin-left: -15px;
}

.cards li:not(:nth-of-type(4)) {
width: 36px;
height: 54px;
}

.cards li:nth-of-type(4) {
margin-right: 30px;
margin-left: 15px;
}

.diamond:not(.nine):not(.king) {
background-color: #0099ff;
}

.cards li:nth-of-type(2).seven:not(.club) {
background-color: #ff3300;
}

.cards:last-of-type li:nth-of-type(3n) {
background-color: #339933;
}

2

Вы наверное не обратили внимание по какому критерию разложена колода?
Карты разложены по порядку. Я к тому, чтобы обойтись без псевдоклассов максимально где это возможно для удобочитаемости кода.

девятки обособить. вместо абстрактных “четвертых li”.
по бубнам - выделены стоящие на нечетных местах.
по семеркам - выделены семерки, кроме второго ряда.

3

Вообще-то, это задание на псевдоклассы, именно псевдоклассы проходятся в заданиях до этого испытания, их и надо использовать.

4

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

5

Карты можно выравнять еще таким образом:

.cards li {
margin-left: -15px;
}

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

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

p.s: оформление цвета карт Вы неплохо сделали. Буду рад, если кто-то напишет вариант лаконичнее))

6

Я вот так выровняла. Все сошлось.

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

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

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

7

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

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

.cards {
width: 500px;
}

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

ul li:nth-last-child(-n+5), ul li:nth-child(-n+4) {
margin-left: -15px;
}

ul li:nth-last-child(even), ul li:nth-last-child(3),ul li:nth-last-child(5),ul li:nth-child(3) {
width: 36px;
height: 54px;
}

ul li:nth-child(5){
margin-right: 12px;
margin-left: 15px;
}

ul:nth-child(2) li:nth-last-child(2), ul:nth-child(3) li:nth-last-child(6), ul:nth-child(3) li:nth-child(4), ul:nth-child(4) li:nth-last-child(4), ul:nth-child(4) li:nth-child(2) {
background-color: #0099ff;
}

ul:nth-child(2) li:nth-child(3),ul:nth-last-child(3) li:nth-child(3), ul:nth-last-child(2) li:nth-child(3) {
background-color: #ff3300;
}

ul:nth-last-child(2) li:nth-last-child(2), ul:nth-last-child(2) li:nth-last-child(5), ul:nth-last-child(2) li:nth-child(4) {
background-color: #339933;
}

100%. Однако узнал поздно про то что можно выбирать несколько элементов с помощью кол-ва(-n+)