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: 518px;
}

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

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

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

.nine.diamond, .nine.heart, .nine.club, .nine.spade {
margin-right: 30px;
margin-left: 15px;
}

.cards:first-of-type li:last-of-type {background-color:#0099ff}

li:nth-of-type(2) {background-color: #ff3300;}

.cards:nth-of-type(2) li:nth-of-type(2) {background-color: #ffffff;}

.cards:nth-of-type(2) li:nth-of-type(3) {
background-color: #0099ff;
}
.cards:nth-of-type(2) li:nth-of-type(5) {
background-color: #0099ff;
}
.cards:nth-of-type(3) li:nth-of-type(6n-11) {
background-color: #0099ff;
}

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

2

Действительно какими-то окольными…

li:nth-of-type(n) вот эта часть выбирает просто все li, может и стоило так написать - без :nth-of-type(n) ?

по-моему, проще выбрать просто девятки - или вы подозреваете наличие ещё каких-то мастей, кроме перечисленных четырех? если нужно было усилить селектор, то используйте li.nine

Дальше, у вас появилось правило от себя с белым цветом фона - а от себя добавлять ничего не надо. Вы добавили его, чтобы перекрасить карту во второй строке. которую вы изначально выкрасили в красный. Посмотрите внимательно: во второй строке вообще нет красных карт, так может задавая вот это правило

стоило просто убрать из выбора вторую строку?

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

1 лайк
3

Всем привет. Получилось как то так))
Но почему-то карты съехали на 19px влево.
Добавил padding-left: 19px; к body…
Может кто подскажет от куда взялись 19px?
(Chrome 72)

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

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

.cards {
  width: 500px;
}

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

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

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

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

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


ul:not(:nth-of-type(2)) li:nth-of-type(2){
  background-color: #ff3300;
}

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

Смотрите, у вас есть два правила:

и идущее чуть ниже

и это правило определяет отступы для четвертой карты - независимо от того, какими эти отступы были раньше. Т.е. даже если вы первым правилом прописали для четвертой карты margin-left: -15px, этот отступ все равно переопределится на “плюс пятнадцать”. Это я к чему? К тому что в первое правило в область исключения девятки (четвертая карта в каждой стороке) можно было не добавлять. А теперь посмотрим на первое правило внимательней - margin-left cотрицательным значением указывает на то, что объект как бы "втягивается на территорию слева: третья карта прижимается ко второй, вторая к первой, а первая? первая должна “заползти” на левый отступ родителя - и так весь ряд ужмется и сместится влево. Да, нам нужно, чтобы карты ужались, стали поплотнее, а вот смещаться - не нужно. А кто в этом виноват - первая карта в каждом ряду, которой задали отрицательный левый маргин и, таким образом, заставили сместиться влево от исходной позиции. Если ей сказать: “Стой на месте” (т.е. для неё отрицательный маргин не прописывать) - никакого смещения не будет.
Теперь о том как 15px смещения превратилось в 19px которые вы дописали: изначально у этой карты уже был маргин, который вы переопределили на -15px. Вот для компенсации между “было и стало” и пришлось добавлять паддинг в 19px боди

2 лайка
5

Спасибо за разъяснение. :slightly_smiling_face:
Столкнулся с подобной проблемой в задании 20/20, но там опытным путем понял, что первую карту, в каждом ряду, надо оставить на месте.

6

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(:nth-of-type(1)) {
margin-left: -15px;
}

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

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

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

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

ul:last-of-type li.ace,
ul:last-of-type li.jack,
ul:last-of-type li.eight
{
background-color: #339933;
}

8

не очень понял как, но сделал
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:nth-child(n+3)/10-A/ {
margin-left: -15px;
}

li:not(.nine) {
width: 36px;
height: 54px;
}
li:nth-child(5) /.nine/ {
margin-right: 30px;
margin-left: 15px;
}

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

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

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