Селекторы. Погружение Испытание: первая раскладка

Курсы §18. Селекторы. Часть 2
1


Здравствуйте, не пойму в чем проблемка
Вот такой CSS у меня:
Снимок экрана 2021-03-08 193443
Снимок экрана 2021-03-08 1934431706×897 452 KB
Снимок экрана 2021-03-08 193515
Снимок экрана 2021-03-08 1935151702×892 502 KB

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

2

Такая же проблема, все идеально, но низ будто чем то отличается. Вот код:
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;
}

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

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

ul:nth-of-type(1) li:nth-of-type(9),
ul:nth-of-type(2) li:nth-of-type(3), ul:nth-of-type(2) li:nth-of-type(5), ul:nth-of-type(3) li:first-of-type, ul:nth-of-type(3) li:nth-last-of-type(3) {
background-color: #0099ff;
}

ul:nth-of-type(1) li:nth-of-type(2), ul:nth-of-type(3) li:nth-of-type(2), ul:nth-of-type(4) li:nth-of-type(2){
background-color: #ff3300;
}

ul:nth-of-type(4) li:nth-of-type(3), ul:nth-of-type(4) li:nth-of-type(9), ul:nth-of-type(4) li:nth-of-type(6) {
background-color: #339933;
}

3

100 совпадание, но почему-то было смещение влево всех карточек, поэтому добавил в класс card отступ слева 19px

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

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

.cards {
width: 500px;
margin-left: 19px;
}

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

li:nth-of-type(n+5), li:nth-of-type(-n+3) {
margin-left: -15px;
}

li:nth-of-type(n+5), li:nth-of-type(-n+3) {
width: 36px;
height: 54px;
}

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

ul:nth-of-type(1) li:nth-of-type(9),
ul:nth-of-type(2) li:nth-of-type(3),
ul:nth-of-type(2) li:nth-of-type(5),
ul:nth-of-type(3) li:nth-of-type(1),
ul:nth-of-type(3) li:nth-of-type(7)
{
background-color: #0099ff;
}

ul:first-of-type li:nth-of-type(2),
ul:nth-of-type(3) li:nth-of-type(2),
ul:nth-of-type(4) li:nth-of-type(2)
{
background-color: #ff3300;
}

ul:nth-of-type(4) li:nth-of-type(3),
ul:nth-of-type(4) li:nth-of-type(6),
ul:nth-of-type(4) li:nth-of-type(9)
{
background-color: #339933;
}

4

Результат 90%. Но пришлось все же добавлять в CSS правки, которые по заданию не надо было добавлять. По тексту кода в комментарии указала, что внепланово добавила.

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

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

.cards {
width: 500px;
/* пришлось добавить этот отступ */
margin-left: 19px;
}

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

.cards li:not(li:nth-child(5)):not(li:nth-child(6)) {
margin-left: -15px;
}

.cards li:not(li:nth-child(5)) {
width: 36px;
height: 54px;
}

/* пришлось добавить свои отступы */
li:nth-child(5) {
margin-right: 15px;
margin-left: 13px;
}

/* так и не смогла этот селектор определить
selector {
margin-right: 30px;
margin-left: 15px;
}
*/

.diamond:not(.nine):not(.cards:nth-of-type(4) li) {
background-color: #0099ff;
}

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

.cards:nth-of-type(4) li:nth-child(4),
.cards:nth-of-type(4) li:nth-child(7),
.cards:nth-of-type(4) li:nth-child(10) {
background-color: #339933;
}

5

А я просто в этом правиле изменил Width с 500 на 518 (получается добавил 18пикселей от себя) и все получилось, 100%

6

Просмотрев ответы, сделал свой “микс”. Отступ margin-left: 19px в .cards пришлось добавить.
Получилось 100%

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

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

.cards {
  width: 500px;
  margin-left: 19px;
}

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

.cards li:not(li:nth-child(5)){
margin-left: -15px;
}

.cards li:not(li:nth-child(5)) {
width: 36px;
height: 54px;
}

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

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

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

.eight.heart,
.jack.diamond,
.ace.spade {
  background-color: #339933;
}
1 лайк
7

Три первых селектора, и ничего не нужно добавлять больше в css

li:not(:nth-child(2)){
margin-left: -15px;
}

li:not(:nth-child(5)){
width: 36px;
height: 54px;
}

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

2 лайка