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

RZX83 · 22.Апрель.2020 15:43:10

Пришел к такому вот решению:

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 {
  margin-right: -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;
}

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

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

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

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

esquire · 16.Май.2020 11:02:44

Максимально компактно попробовал написать код:

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

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

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

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

.ace.spade + li {
background-color: #339933;
}

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

SlavaKHV31 · 25.Июль.2020 04:55:39

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

li:first-child,
li:last-child,
li:nth-of-type(5),
li:nth-of-type(9){
background-color: #ffcc33;
}

li:nth-of-type(2),
li:nth-of-type(6),
li:nth-of-type(10){
background-color: #0099ff;
}

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

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

ul:nth-of-type(1) li:nth-of-type(2n) {
background-color: #996666;
}
как можно сократить ?

Konstantin_CPU · 27.Июль.2020 11:03: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;
}

.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-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:nth-last-of-type(2) li:nth-child(3n+8){
background-color: #339933;
}

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

strayder · 17.Август.2020 20:16:24

моё решение. Как ни странно, оказалось проще, чем первое испытание в этой главе

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

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

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

Spoki4 · 17.Апрель.2021 19:49:49

Мой вариант
Надеюсь, что доля правильности в нем есть

li:not(:nth-last-of-type(13)) {
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-3) {
background-color: #ffcc33;
}

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

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

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

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

Andrey5 · 13.Май.2021 17:57: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;
}

.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-child(1),
.cards li:nth-child(5),
.cards li:nth-child(9),
.cards li:nth-child(13)
{
background-color: #ffcc33;
}

.cards li:nth-child(2),
.cards li:nth-child(6),
.cards li:nth-child(10)
{
background-color: #0099ff;
}

.eight.club,
.queen.club,
.ten.diamond,
.three.spade,
.eight.diamond,
.six.club
{
background-color: #ff3300;
}

.six.heart,
.queen.heart {
background-color: #339933;
}

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

Shapogolik · 04.Июнь.2021 15:05:48

Хорошее решение. Я долго думал какой короткий и подходящий код для голубого цвета.
Написал такой большой код “.cards li:not(:nth-of-type(4)):not(:nth-of-type(8)):nth-of-type(-n+10):nth-of-type(2n)”

Все работало на 100% но сильно большой код.

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

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

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

User_4815162342 · 11.Июнь.2021 20:26:19

развернуть

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

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

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

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

.ace.spade ~ .heart {
background-color: #339933;
}

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

YuraKrumskiy · 14.Сентябрь.2021 20:11:41

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;
left:23px
}

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

}

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

.cards li {
margin-left: -20px;
}

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

.cards li:first-child,
.cards li:nth-child(5),
.cards li:nth-last-child(5),
.cards li:nth-last-child(1)
{
background-color: #ffcc33;
}

li:nth-child(2),
li:nth-child(6),
li:nth-child(10){
background-color: #0099ff;
}

ul:nth-child(3) li:nth-child(4n+4),
ul:nth-child(5) li:nth-child(4n+4) {
background-color: #ff3300;
}

ul:nth-child(4) li:nth-child(3n+8) {
background-color: #339933;
}
ul:nth-child(2) li:nth-child(even){
background-color: #996666;
}

sharafiev · 11.Ноябрь.2021 09:14:42

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

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

li:nth-child(4n+2) {
background-color: #0099ff;
}

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

.heart.six,
.heart.queen{
background-color: #339933;
}

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

Miro · 23.Декабрь.2021 16:08:51

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-3) {
  background-color: #ffcc33;
}

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

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

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

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

olgako · 22.Январь.2022 18:06:51

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

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

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

ul:nth-child(4) li.heart:nth-child(1n+5) {
background-color: #339933;
}

ul:nth-child(2) li:nth-child(even) {
background-color: #996666;
}

tom_lunacharskiy · 12.Март.2022 16:53:40

Для меня селекторы была самой сложной из всех пройденных тем, поэтому не судите строго

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

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

ul li:nth-of-type(2), li:nth-of-type(6), li:nth-of-type(10) {
background-color: #0099ff;
}

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

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

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

Chilly_Willy · 14.Апрель.2022 06:26:05

Оставлю только раскраску - остальное у всех одинаково.

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

.cards li:nth-child(-4n + 10):not(.cards:first-of-type li) { 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; }

gzhegozh · 18.Август.2022 08:34:18

Странно, что никто не пользуется ласт чайлдами. Это упрощает.

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

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

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

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

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

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

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

Solovey1966 · 06.Сентябрь.2022 16:14:28

Объясните за счёт чего получился сдвиг колоды от левого края. Никак не могу понять

Solovey1966 · 06.Сентябрь.2022 17:47:42

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

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

}

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

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

}

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

.cards li {
margin-left: -20px;
}

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

}

/li:last-of-type,/
/li:first-of-type,/
/li:nth-of-type(5),/
/li:nth-last-of-type(5)/
ul li:nth-of-type(4n+1)
{
background-color: #ffcc33;
}

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

/ul:nth-of-type(2) li:nth-of-type(4),/
/ul:nth-of-type(2) li:nth-of-type(8),/
/ul:nth-of-type(2) li:nth-last-of-type(2),/
/ul:nth-of-type(4) li:nth-of-type(4),/
/ul:nth-of-type(4) li:nth-of-type(8),/
/ul:nth-of-type(4) li:nth-last-of-type(2){/
ul:nth-of-type(2n) li:nth-of-type(4n)
{
background-color: #ff3300;
}

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

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

Вставляю решение в котором оставил первоначально созданный код под комментами. Для понимания как шла мысль…)))

annpostnikova98 · 18.Сентябрь.2022 15:56:24

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

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

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

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

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

gzhegozh · 19.Сентябрь.2022 06:00:47

Все карты, кроме первой, сдвигаются на 20px влево. Чтобы это не примtнилось к первой карте используется псевдокласс “:not(:first-child)”.

ul li:not(:first-child) {
margin-left: -20px;
}