Визуально справился, но что-то с общим смещением...9/20

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

ul:nth-of-type(n) li:nth-child(-n+4),
ul:nth-of-type(n) li:nth-child(n+6)
{
    margin-left: -15px;
}

ul:nth-of-type(n) li:nth-child(-n+4),
ul:nth-of-type(n) li:nth-child(n+6) {
    width: 36px;
    height: 54px;
}

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

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

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

ul:nth-of-type(4) li:nth-child(3n+1) {
    background-color: #339933;
}
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;
}

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

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

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

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

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

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

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

3

Мне ваш подход к nth-of-type кажется неверным.

Давайте попробуем прочитать селектор ul:nth-of-type(n) - “для каждого n-го ul”.
Т.е. по факту он выполняет то же самое, что и селектор ul - “для каждого ul”.
Но, если вы хотите обратится к li во всех ul, то даже просто ul можно опустить.

Раз уж мы прорабатываем сектор nth-of-type,
то вместо li:not(.nine) логично использовать li:not(:nth-of-type(4)), но это не критично для решения.

Теперь разберемся как сместить все вправо - у нас есть три селектора, отвечающие за деформацию или смещение:

  1. margin-left: -15px; - явно отвечает за наложение карт друг на друга.
  2. width: 36px; height: 54px; - уменьшает размер карты (примените к любому для проверки).
  3. margin-right: 30px; margin-left: 15px; - явно “раздвигает” карты.


/* Накладываем все карты друг на друга кроме 4-ой и 1-ой */

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

/* Уменьшаем размер всех карт кроме 4-ой */

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

/* Раздвигаем все карты вокруг 4-ой */

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

/* Выбираем все нечетные карты, среди них выбираем бубны */

li:nth-of-type(odd).diamond {
    background-color: #0099ff;
}

/* Во всех строках, кроме 2-ой, выбираем семерки */

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

/* В 4-ой строке выбираем каждую 3-ю карту */

ul:nth-of-type(4) li:nth-of-type(3n) {
    background-color: #339933;
}
3 лайка