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

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

Вот еще вариант
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(:first-of-type):not(.nine) {
margin-left: -15px;
}

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

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

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

24

Они четные! Вы забыли про пустые DIV !!! Они есть в каждом UL в начале и в конце ! Значит первая карта в каждой строке по HTML коду является вторым дочерним элементом в UL, а первым - пустой DIV ! .cards .diamond:nth-child(2n) : каждая четная карта с классом .diamond !!!

1 лайк
26

Хватит и такой подписи li:not(:first-of-type)
что как я думаю значит все li кроме первого, он получается как отправная точка и от него всё сдвигается.
А вот твою надпись понять не могу . Получается (я так думаю)) все кроме первого ли и ещё ты добавил кроме 4 li -вроде так. Получается (:nth-of-type(4)):not нафиг не надо.

27

С семерками ещё короче можно .seven:not(.club) {
background-color: #ff3300;

28

Подскажите
.diamond.eight, .diamond.six, .diamond.ten, .diamond.queen, .diamond.ace
{
background-color: #0099ff;)

можно как нибудь укоротить ? Есть ли возможность написать один класс (если он общий)и к нему плюсовать другие ? а не постоянно прописывать оба класса ?
Как нибудь так: .diamond(eight, six, ten, queen, ace)?

29

А зачем писать оба класса? Пишите один, раз он общий. А для всего остального неподходящего есть :not()
В этой теме много примеров кода. Если полистать вверх, можно найти очень хорошие варианты.

30

Это понятно, что для неподходящего есть :not(). а если этого не подходящего куча, а подходящего два или три? вот я и спрашиваю Есть ли возможность написать один класс (если он общий)и к нему плюсовать другие ? а не постоянно прописывать оба класса ?

31

Нет такой возможности.

32

А я вот наткнулся случайно: Например, если имеются классы article.active и article.visible, то можно использовать конструкцию, приведенную ниже, чтобы выбрать оба класса. Особенно это актуально, если таких классов много.
Правда это в CSS4
article:matches(.active, .visible) {
background: green;
}

1 лайк
33

Поддержка так себе и только с префиксами, но выглядит заманчиво.

35

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(:first-of-type) {
margin-left: -15px;
}

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

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

.cards:not(:last-of-type) li:not(.spade):not(.club):not(.heart):not(.king):not(.nine) {
background-color: #0099ff;
}

.cards li:nth-child(3):not(.club) {
background-color: #ff3300 ;
}

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

Оцените пожалуйста код, 100% совпадение, но ощущение, что через одно мест написано.

36

Это плохо сделано. И вместо :nth-child(5) лучше :nth-of-type.

37

Спасибо!

38

Самый простой и краткий вариант, какой у меня получился:

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(.six) {
margin-left: -15px;
}

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

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

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

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

ul:last-of-type li:nth-of-type(3n) /здесь была внесена маааленькая правка, спасибо Ineska/ {
background-color: #339933;
}

1 лайк
39

Подумайте о том, что значит 3n+3.

40

Каждая третья карта начиная с третьей. Нет? Если нет, то как это записать? Увы, я не слишком дружу с математикой:laughing:

41

Если вы выбираете каждую третью, то всё равно начинаете с третьей карты, разве нет?

42

А. Все, поняла. Просто li:nth-of-type(3n). Спасибо!

43

.cards li::before {
font-family: “Courier”, monospace;
}
подскажите значение этого правила,почему .cards li::before стоит ‘::’ а не ‘:’,извиняюсь за глупый вопрос

44

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.
В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.