[9/20] Решил на 100%, но смущает мой код.

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

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

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

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

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

.diamond:not(:nth-child(5)):not(:nth-last-child(3)):not(:nth-last-child(5)):not(:nth-child(3)) {
    background: #0099ff;
}

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

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

Смущает длинное перечисление псевдоэлементов в третьей снизу строчки. Да и наверно то, что использовал только два новых псевдокласса: “:not” и “:nth-of-type”, по сути. Просто все уроки, в которых перечислялись новые способы выбора объектов из списка, были похожи друг на друга как две капли воды, и свойства им подставлялись одинаковым образом, в результате я знаю что они есть, я представляю, что они делают и как работают, но я так и не понял зачем и как их использовать.

1 лайк
2

Вот мой код и мне кажется что содержимое кода большая :smile: :computer:
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-child(2)) {
margin-left: -15px;
}

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

li:nth-of-type(4){
margin-right: 30px;
margin-left: 15px;
}
.diamond:not(:nth-of-type(2)):not(.king):not(.jack):not(.nine){
background: #0099ff;
}

.seven:not(.club) {
background: #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-last-of-type(1) {
background: #339933;
}

3

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

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

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

li:nth-of-type(2n+1).diamond {
background: #0099ff;
}

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

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

4

Друзья, подскажите кто знает, можно ли в строчке

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

.club заменить на псевдокласс? Всю голову себе сломал уже

5

нет, это самый верный вариант

2 лайка
6

внешний вид совпадает но почему то не дает совпадения с оригиналом, согласна, не проследила закономерность в окрашивании голубым цветом нечетных бубей, но код то работает а выдает ошибку окрашивания хотя по факту окрашено все верно
` 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-child(2)) {
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;
}

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

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

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

7

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

8

??? …ладно…попробую…
это селектор отрицающий, псевдокласс :not
он должен выбрать карты, которые должны окраситься голубым

9

Screen Shot 2016-08-14 at 21.39.55.png1440×900 780 KB

10

У меня ваш селектор не работает. Поэтому я и попросила вас его расшифровать. Распишите текстом, какие карты он выбирает, а какие пропускает.

11

.diamond:not(ul:last-of-type li):not(ul:first-of-type li:nth-of-type(4))
.diamond - он выбирает все что обозначено классом diamond
:not - но не…
(ul:last-of-type li) элементы li из элемента ul который в свою очередь последний в своем родительском элементе
:not - но не …
:not(ul:first-of-type li:nth-of-type(4)) элемент li, который является 4 ым по счету элементом в своем родительском элементе ul, который в свою очередь является первым элементов в своем родительском элементе кем бы он не являлся