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

Vengetik · 08.Январь.2018 11:15:01

Ничего необычного, кроме предпоследнего (если конечно сам додумался). Круто. Только в последнем селекторе я бы за место
.cards:first-of-type li:nth-child(2n) { background-color: #996666; }

сделал бы так:

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

Yan · 14.Январь.2018 14:43:48

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

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

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

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

.cards:last-of-type li:not(.six):not(.seven):not(.nine):not(.ten):not(.queen):not(.king) {
background-color: #339933;
}

А можно ли так? Или совсем по колхозному ?

Ineska · 14.Январь.2018 16:03:10

Это очень плохо. Чем короче селектор, тем лучше и правильнее.

Yan · 17.Январь.2018 19:09:53

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-child){
margin-left: -20px;
}

ul::before {
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:nth-of-type(1n+2) li:nth-of-type(4n+2) {
background-color: #0099ff;
}

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

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

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

Селекторы, часть 2 / Испытание: вторая раскладка [20/20]

Проверьте пожалуйста, ровно ли все?

Marina_D · 29.Январь.2018 12:51:45

можно проще. у вас есть места, где вы пишете type, хотя подходит сhild, а есть наоборот.
(4n+4) - подумайте еще раз. что вы хотели сказать этим? а что этим - (3n+8)? присмотритесь, для зеленого цвета есть очень простая закономерность.

m9fleming · 15.Февраль.2018 23:19:11

У меня похожий код но немного отличается и тоже 100%

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-child) {
margin-left: -20px;
}ul::before {
content: “”;
position: absolute;
right: 0;
top: 0;
display: block;
width: 37px;
height: 55px;
border: 1px dashed #33bb33;
border-radius: 5px;

}.cards li:nth-child(4n-3) {
background-color: #ffcc33;
}.cards:not(:first-of-type) li:nth-child(4n-2) {
background-color: #0099ff;
}.cards:nth-of-type(2n) li:nth-child(4n) {
background-color: #ff3300;
}.cards .ace.spade ~ .heart {
background-color: #339933;
}.cards:first-of-type li:nth-child(2n) {
background-color: #996666;
}

tetrasar · 06.Март.2018 19:16:33

Результат 100%. Прошу оценить качество и краткость?
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;
}

ul 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:first-child,li:nth-child(4n)+li {
background-color: #ffcc33;
}

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

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

ul:nth-of-type(3) .ace.spade+li {
background-color: #339933;
}

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

Ander · 07.Июнь.2018 13:52:59

все же как правильнее, выбирать в качестве селектора ul или .cards?

Ineska · 08.Июнь.2018 06:57:32

Лучше обращаться к элементу по классу.

Ander · 08.Июнь.2018 08:05:35

Понятно, спасибо!

Maksov · 17.Январь.2019 09:19:24

20/20

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-child){
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-child(4n+1) {
background-color: #ffcc33;
}

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

.cards:nth-child(odd) li:nth-child(4n) {
background-color: #ff3300;
}

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

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

Major · 19.Январь.2019 08:47:17

Скажите пожалуйста почему испытание не проходит проверку с кодом:

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

ul::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):not(.three.diamond) {
  background-color: #0099ff;
}

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

.cards:nth-last-of-type(2) li.six,
.cards:nth-last-of-type(2) li.six ~ .queen {
  background-color: #339933;
}

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

Визуально все впорядке, но минибраузер отображает будто синие карты вовсе не синий, а если убрать :not(.three.diamond) то испытание проходит и засчитывает 100%, визуально же ничего не меняется. В чем причина?

Shainon · 23.Апрель.2019 11:20:57

Вот мой код, если кому интересно

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-child) {
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-child(4n+2) {
background-color: #0099ff;
}

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

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

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

melli10 · 13.Июнь.2019 16:26:37

У меня .ace.spade ~ .heart {
background-color: #339933;
}, выделяет только даму черви зелёным, а там две карты зелёные нужно выделить.

melli10 · 13.Июнь.2019 17:19:18

Я не знаю, правильнее ли будет, но можно сделать чуточку поменьше по длине:
ul li:not(:first-of-type) {
margin-left: -20px;
}

поменять на

ul :nth-child(n+2){
margin-left: -20px;
}
Вот здесь в этом момент интересный, вначале у меня было ul li, потом я li убрала, когда ul остаётся с пробелом, то соответствующий нужный результат, убираешь пробел, результат совсем другой.
Если честно, я не поняла, почему ваше ul li:not(:first-of-type) срабатывает, по идее это отрицание первой строки, после родительского элемента.

Рассмотрим ниже:
li:first-child,li:nth-child(4n)+li
короче будет
li:nth-child(4n+1){
background-color: #ffcc33;
}

ul:not(:nth-of-type(1)) li:nth-last-of-type(4n)
короче по длине
ul:not(:first-of-type) li:nth-child(4n+2) {
background-color: #0099ff;
}
ul:not(:nth-of-type(odd)) li:nth-of-type(4n)
тоже можно записать на чуть -чуть короче
ul:nth-child(odd) li:nth-child(4n+4) {
background-color: #ff3300;
}

1tap · 31.Август.2019 11:38:15

Почему он дописывает к “nth-of-type(2’n’)”. Я не помню чтобы при обучении я приписывал букву n к числу. Что она значит можете обьяснить.

Hierumo · 31.Август.2019 14:35:05

просто цифра это значит конкретный элемент по порядку.
2n - это значит “каждый второй”
3n - “каждый третий”
2n-1 - каждый второй, начиная с первого

короче, формулы с n - это способ выделения множества селекторов “в цикле” по определенному паттерну.

everhard · 31.Август.2019 15:20:29

В дополнению к объяснению Hierumo - подставляйте вместо n числа, начиная с 0, и считайте результат.

Примеры

2n

(2n): (2 * 0 = 0), (2 * 1 = 2), (2 * 2 = 4), (2 * 3 = 6) и так далее - то есть, 2, 4, 6 элементы и так далее - каждый второй элемент.

3n - 1

(3n - 1): (3 * 0 - 1 = -1), (3 * 1 - 1 = 2), (3 * 2 - 1 = 5), (3 * 3 - 1 = 8) и так далее - то есть, будут выбраны элементы, которые по порядку 2, 5, 8 и так далее. Можно еще сказать, каждый третий минус один.

n + 2

(n + 2): (0 + 2 = 2), (1 + 2 = 3), (2 + 2 = 4), (3 + 2 = 5) и так далее - то есть, будут выбраны элементы 2, 3, 4, 5 и так далее - все элементы, начиная со второго (включительно).

2n + 3

(2n + 3): (2 * 0 + 3 = 3), (2 * 1 + 3 = 5), (2 * 2 + 3 = 7), (2 * 3 + 3 = 9) и так далее - то есть, будут выбраны элементы 3, 5, 7, 9 и так далее - каждый второй, начиная с третьего (включительно).

-n + 3

(-n + 3): (-0 + 3 = 3), (-1 + 3 = 2), (-2 + 3 = 1), (-3 + 3 = 0) и так далее - то есть, будут выбраны 3, 2 и 1 элемент - все элементы, с первого по третий. Или смотреть в обратном порядке - с третьего по первый.

Песочница для проверки: https://css-tricks.com/examples/nth-child-tester/

OmeninWeb · 30.Сентябрь.2019 11:15:06

Было очень легко))
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:nth-of-type(even) li:nth-of-type(4n+4) {
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(even){
background-color: #996666;
}

Maksim75 · 03.Март.2020 04:24:34

Вот такой код. Дает 100%

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

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

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

.diamond:nth-child(2n){
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;
}