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

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

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

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

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

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

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

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

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

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

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

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

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

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

нет, не самый

25

а вот это наиболее оптимальный и короткий код

li:not(:nth-child(2)) {
  margin-left: -15px;
}

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

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

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

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

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