[20/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 {
    position: relative;
    width: 380px;
    text-align: left;
}

.cards li {
    width: 37px;
    height: 55px;
}

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

li:not(:first-of-type) {
    margin-left: -20px;
}

ul::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 37px;
    height: 55px;
    border: 1px dashed #33bb33;
    border-radius: 5px;
}

li:nth-of-type(4n+1) {
    background-color: #ffcc33;
}

ul:not(:first-of-type) li:nth-of-type(4n+2):not(:nth-of-type(12)) {
    background-color: #0099ff;
}

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

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

ul:first-of-type li:nth-of-type(2n) {
    background-color: #996666;
}
2

У ul есть класс, используйте его.
Формула 4n+4 мне что-то напоминает, а вам?

2 лайка
3

Вы абсолютно правы, исправился :slight_smile:

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

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

.cards {
    position: relative;
    width: 380px;
    text-align: left;
}

.cards li {
    width: 37px;
    height: 55px;
}

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

li:not(:first-of-type) {
    margin-left: -20px;
}

.cards::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 37px;
    height: 55px;
    border: 1px dashed #33bb33;
    border-radius: 5px;
}

li:nth-of-type(4n+1) {
    background-color: #ffcc33;
}

.cards:not(:first-of-type) li:nth-of-type(4n+2):not(:nth-of-type(12)) {
    background-color: #0099ff;
}

.cards:not(:nth-of-type(2n+1)) li:nth-of-type(4n) {
    background-color: #ff3300;
}

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

.cards:first-of-type li:nth-of-type(2n) {
    background-color: #996666;
}
4

В двух правилах не хватает .cards в начале. Это называется “пространство имён”. Соблюдение этого правила важно.
И “выбрать не 12-й элемент” при условии, что уже есть формула, смотрится немного топорно. Подумайте еще.

1 лайк
5

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

Исправился.

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

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

.cards {
    position: relative;
    width: 380px;
    text-align: left;
}

.cards li {
    width: 37px;
    height: 55px;
}

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

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

.cards::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 37px;
    height: 55px;
    border: 1px dashed #33bb33;
    border-radius: 5px;
}

.cards li:nth-of-type(4n+1) {
    background-color: #ffcc33;
}

.cards:not(:first-of-type) li:nth-of-type(4n+2) {
    background-color: #0099ff;
}

.cards:not(:nth-of-type(2n+1)) li:nth-of-type(4n) {
    background-color: #ff3300;
}

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

.cards:first-of-type li:nth-of-type(2n) {
    background-color: #996666;
}
1 лайк