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

jenk_cartman · 03.Июль.2018 16:01:35

спасибо большое)

Antoha · 06.Июль.2018 06:35:29

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

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

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

.cards:nth-of-type(4) li:nth-of-type(3n) {
background-color: #339933;
}
нормально ли?

Ineska · 06.Июль.2018 07:13:29

Здесь плохо.

DimaHTML · 03.Август.2018 06:28:13

Увидел в комментах такую строку для раскраски бубей в синий цвет.

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

Не понимаю, как это работает? Кто может объяснить?
По-моему, первая нечетная бубна - это девятка (первая бубна в первой строке). Значит она и должна закраситься, но происходит по-другому

shadowaps · 13.Ноябрь.2018 17:57:39

Нечетные элементы учитываются в разрезе одной строки, а не всего “пасьянса”.
Псевдокласс задает цвет всем нечетным бубнам.
Все бубны, которые требуется окрасить - нечетные (в своей отдельной строке)

JohnDoe · 08.Апрель.2019 02:45:55

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

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

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

.diamond:nth-child(2n) {
background-color: #0099ff;
}

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

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

ded_m · 18.Май.2019 19:29:49

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

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

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

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

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

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

melli10 · 12.Июнь.2019 21:52:39

Второй вариант короче.

melli10 · 12.Июнь.2019 22:12:07

.diamond:nth-child(2n){
background-color: #0099ff;
}
вместо
ul:not(:last-of-type) li.diamond:not(.nine)
{
background-color: #0099ff;
}
и будет самый короткий.

chappaiNK · 29.Июль.2019 12:23:20

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

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

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

.diamond:nth-of-type(odd) {
background-color: #0099ff;
}

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

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

Svetlana_Solo · 18.Ноябрь.2020 06:27:43

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

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

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

ul.cards:last-of-type li:nth-of-type(3n) {
background-color: #339933;
}
основная сложность была с отступами. не сразу поняла, что первую карту нужно исключить в отступах. в целом интересное задание )

Spoki4 · 17.Апрель.2021 16:35:54

Подскажите, такое исполнение кода приемлемо вообще в реальной практике?

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

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

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

ul:not(:nth-of-type(4)) li.diamond:not(:nth-of-type(4)) {
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;
}

Kyka · 15.Январь.2022 12:13:22

Здравствуйте!

Я потихоньку осваиваю HTML и CSS, но вот с пасьянсом у меня есть вопрос.

Написал следующий код:

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

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

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

.diamond:nth-of-type(odd) {
background-color: #0099ff;
}

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

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

Результат один-в-один, как в образце задачи. Но мне засчитывают только 72%. В чём некорректность моего кода, могли бы подсказать?

IlyaSizov · 11.Февраль.2022 21:39:01

отступ margin-left: -15px нужно задать для всех первых элементов в строке
а то, что для .nine задаешь, он все равно переопределяется потом ниже по коду, так что это действия не несет никакого )

AlexMebel · 28.Февраль.2022 16:38:20

li:nth-child(n+3) {
  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(.nine):not(.seven):not(.jack):not(.king) {
  background-color: #0099ff;
}

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

.cards:nth-of-type(4) .eight,
.cards:nth-of-type(4) .jack,
.cards:nth-of-type(4) .ace {
  background-color: #339933;
}

chin1984 · 12.Август.2022 21:37:51

у меня другое получилось
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:nth-of-type(4) {
margin-right: 21px;
margin-left: 24px;

}

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

}

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

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

ul:nth-of-type(4):not(:first-child) li:not(:nth-of-type(1)):not(:nth-of-type(5)):not(:nth-of-type(2)):not(:nth-of-type(4)):not(:nth-of-type(7)):not(:nth-of-type(8)) {
background-color: #339933;
}

li:not(:nth-of-type(4)) {
margin: -6px;}

gzhegozh · 15.Август.2022 09:36:40

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.nine {
margin-right: 30px;
margin-left: 15px;
}

.diamond:not(:nth-of-type(even)) {
background-color: #0099ff;
}

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

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

annpostnikova98 · 17.Сентябрь.2022 12:31:00

в части с цветами кода многовато, можно было сократить, но главное, что работает)))

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-child(5) {
margin-right: 30px;
margin-left: 15px;
}

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

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

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

DmZhuravlev · 05.Декабрь.2022 11:35:22

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

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

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

.diamond:not(:nth-of-type(even)) {
  background-color: #0099ff;
}

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

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

GluhovaAn · 07.Январь.2023 05:01:17

.diamond:nth-of-type(odd) {
background-color: #0099ff;
}
еще чуточку сократить)