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

Есть немного)

Если НЕ нечетный - значит какой?

Есть ли смысл прибавлять эту двойку? (а можно и без формулы обойтись)

1 лайк

Вот моё ) Зачем такую кучу перечислений все делают) непонятно _)
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-of-type(4)) {
width: 36px;
height: 54px;
}

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

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

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

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

Здесь ход мыслей должен быть таков: нужно выбрать ВСЕ элементы кроме первых
.cards li:not(:nth-of-type(1)):nth-of-type(n+1):nth-of-type(-n+14

Запись непонятная. Здесь прослеживается закономерность
.cards li:nth-of-type(4n+1)

зачетно заметил)

вы уверены, что человеку, спустя год(!) после его сообщения интересны ваши комментарии? пишите лучше в актуальных темах :slight_smile:

Пускай, может кому-то другому это будет полезно)

Хочу обратить ваше внимание(!) на то, что от долгого хранения код не портится.
Или оставлять комменты под “старым” кодом опасно для здоровья?)
P.S. Напр., у меня это свойство - “двухэтажное”, у других оно 100500 символьное, мне показалось интересным, что человек нашел закономерность и я решил, что может мой коммент поможет обратить внимание других новичков НЕ писать 4-5 этажные селекторы.

2 лайка

Думаю, достаточно компактно написал:

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

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

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

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

1 лайк

Мой вариант

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

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

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

ul:nth-of-type(3) .heart:not(.ten):not(.five){
background-color: #339933;
}

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

Ребята,выполнил задание,как смог,хотел бы услышать экспертное мнение.Очень трудно дается тема селекторов,а именно их логика и каком случае какой из селекторов нужно применять!
в задании выдало 98%

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;
right:-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:22px;
top:0;
display: block;
width: 37px;
height: 55px;
border: 1px dashed #33bb33;
border-radius: 5px;
background:none;
}

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

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

.cards:not(:nth-of-type(1)):not(:nth-of-type(3)) li:nth-child(4),li:nth-child(8):not(.six),li:nth-child(12):not(.three){
background-color: #ff3300;
}

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

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

Мое решение, испытание интересное!
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:first-child, li:nth-child(4n+1), li:last-child {
background-color: #ffcc33;
}

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

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

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

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

Я решил так(пришлось попотеть с формулами, т.к. не хотел использовать контекстные селекторы классов и псевдокласс :not. 1 правило переместил с низа для удобства)

ul:nth-child(2)>li:nth-child(even) {
background-color: #996666;
}
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;
}

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

ul:nth-child(2n+1)>li:nth-child(4n-12) {
background-color: #ff3300;
}

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

12 - это 4 * 3 (то есть на 4 делится без остатка), поэтому можно писать только 4n.
Знак > писать смысла нет, потому что в задании отсутствуют вложенные списки.

Вместо знака > следовало просто оставить пробел?

1 лайк

Многие прописывают класс cards для правил, это обязательно? Если да то почему?

Я просто вот так писал и всё работает.
li:nth-child(4n-3){
background-color: #ffcc33;
}

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

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

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

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::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(2n+1):not(:nth-child(3)):not(:nth-child(7)):not(:nth-child(11)) {
background-color: #ffcc33;
}

ul:not(:nth-of-type(1)) li:nth-of-type(2n):not(:nth-of-type(4)):not(:nth-last-of-type(6)):not(:nth-last-of-type(2))
{
background-color: #0099ff;
}
ul:nth-child(3) li:nth-child(4),
ul:nth-child(3) li:nth-child(8),
ul:nth-child(3) li:nth-child(12),
ul:nth-child(5) li:nth-child(4),
ul:nth-child(5) li:nth-child(8),
ul:nth-child(5) li:nth-child(12)
{
background-color: #ff3300;
}

ul:nth-child(4) li:nth-child(8),
ul:nth-child(4) li:nth-child(11) {
background-color: #339933;
}

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

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

Ха! Круто подмечено, учитесь!

Оцените, жду критики.
li:nth-child(4n+1) {
background-color: #ffcc33;
}

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

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

.cards:nth-last-of-type(2) .ace.spade ~ .heart {
background-color: #339933;
}

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