Испытание: первая раскладка [9/20] - общее непонятное смещение строк, 76% выполнения задачи + правильный ответ.

Курсы §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;
}

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

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

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

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

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

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

Если записывать его в таком виде, то получается визуально вроде все верно почти, а строчки смещены. Проблема как я посмотрел не у меня одного, и кто как решает её. Вроде как неправильно вот это строчка:

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

Если изменить 4 на 1. То все становится хорошо.

Самое плохое, с чем я столкнулся, что ответ есть, а понимания нет.
Для таких же как я, и возможно, для улучшения задания в будущем.

Первое. То что “НЕ СДВИНУТА” 1 и 4 карта, я понял только с форума. Но до конца все равно не вкурил, как это понять, увидеть…

Второе. Меня как новичка очень сбил с толку, видимо, отрицательный пиксель.
Из всех кодов, что я видел - не меня одного. Упорно тыкаемся на 4 элемент. Как я понимаю, из - за непонимания движения с отрицательным пикселем и то-что не видим какие карты двигаются.

Спишу это все на непонимание отрицательного пикселя, как и что он там сдвигает (даже после прочтения дополнительных материалов).

Ну а так все гуд, предыдущие задания зашли хорошо и относительно быстро справился, но вот на это понимание-непонимания я потратил около 2-3 часов… И форум кишит этим(с моего взгляда субъективного сейчас :grinning: )

2019-04-30_174449 2019-04-30_174534

2

Аналогичная проблема, правда код отличается. Пробовал экспериментировать с готовыми решениями, некоторые ранее 100% закрывали задание на 100%, теперь не работают.`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 {
margin-left: -15px;
}

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

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

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

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

.eight.heart, .ace.spade, .jack.diamond {
background-color: #339933;
}
`

3

Скорее всего, потому что смещаются там не все карты, как у тебя в этой строчке:

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

А все кроме, 1 и 4.

Если подставить вот такой код в твой, то будет 100%

li:not(:nth-of-type(1)) {
margin-left: -15px;
}

Как это понять, увидеть, я так и не понял. Я допер, что вроде как там карта 4 не смещена, потом оказалось, что там не смещены карты 1 и 4. (на форуме где-то нашел)

И барабанная дробь если просто указать что , только карта 1 не смещена - бумс , все хорошо.

Если указать только на 4, то вот такая шняга как у тебя при смещении всех карт.

По идее правильный ответ, указать смещение без смещения 1 и 4 карты.

Некоторые догадываются что карта 1 не смещена, и у них прокатывает 100%

4

чудите ребята. сначала все складываем, потом уменьшаем, потом отодвигаем от девятки

годнота 
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(:first-of-type) {
  margin-left: -15px;
}

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

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

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

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

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

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

3 лайка
5

:grin: вот такого объяснения не хватало. :+1:

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

Наверное, не понимаю пока все равно , как видеть движение элементов - где они были, где они должны быть, и где они сейчас.

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

6

Подскажите пожалуйста почем все встает на свои места с
li:not(:nth-of-type(1)) {
margin-left: -15px;
}
А так не встает
li:not(:first-child) {
margin-left: -15px;
}

7

image
потому что первая карта это не первый дочерний элемент неупорядоченного списка.
первым там идет пустой див

можете указать

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

и убедиться в этом

1 лайк