[9/20] 100% Я у мамы программист (с 2х псевдоклассов)

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

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

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

.cards li:nth-of-type(4) {
margin-right: 30px;
margin-left: 15px;
}
.cards:nth-of-type(1) li:nth-child(10),
.cards:nth-of-type(2) li:nth-child(4),
.cards:nth-of-type(2) li:nth-child(6),
.cards:nth-of-type(3) li:nth-child(2),
.cards:nth-of-type(3) li:nth-child(8) {
background-color: #0099ff;
}
.cards:nth-of-type(1) li:nth-child(3),
.cards:nth-of-type(3) li:nth-child(3),
.cards:nth-of-type(4) li:nth-child(3) {
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;
}

2

Вы не проследили закономерность, поэтому перечисляете элементы через запятую. Но что если их будет 100 и больше?
Посмотрите другие коды, разберите используемые формулы nth-child.
9/20 — прошу оценить что не так!
Испытание: первая раскладка [9/20] Критику пожалуйста
Испытание: первая раскладка [9/20]

1 лайк
3

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

1 лайк
4

Правильно рассуждаете.
http://nth-calculator.com/ помощь по формулам.

2 лайка
5

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

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

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

Первое не очень удачно, тоже перебором. А во 2 и 3 нашел закономерность

6

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

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

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

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

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

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

кое-где можно было обойтись просто именем класса вместо псевдоклассов

1 лайк
7

Вот, что у меня получилось)

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

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

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

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

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

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

Прошу глянуть код.

Немного смущает часть с .diamond, нагромоздила.

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(.nine) {
 width: 36px;
 height: 54px;
}

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

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

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

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

Посмотрите код по ссылке Испытание: первая раскладка [9/20]

10

Я с бекграунды так описал:

<-- Сработает, если это: НЕ последняя строка И не класс .diamond в четвёртой колонке -->
ul:not(:last-of-type) li:not(:nth-of-type(4)).diamond {
    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) {
    background-color: #339933;
}
11

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

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

.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;
}

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

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

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

По картам все совпало но почему-то не засчитывалось прохождение из-за несовпадения отступа body слева. Пришлось добавить padding-left 20px. После этого засчиталось, но только на 90%.

12

Красавчик. Есть же.

13

Добрый вечер!
Подскажите, пжл, где я пропустил описание приставки “:not” в курсе? В теории точно не было, а в задании, если посмотреть правильный ответ, есть…

Снимок экрана в 2017-09-13 23-56-45
Снимок экрана в 2017-09-13 23-56-45.png1920×1080 519 KB

14

2-3 шаг этого же курса.

15

В первом тоже есть закономерность: все эти карты - нечетные бубны.

16

Думаю, очень криво, но все выглядит как в результате) Чем плох код?)

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(1n+3) {
margin-left: -15px;
}

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

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

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

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

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