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

Ineska · 11.Январь.2017 14:54:19

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

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

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

Andrey_programmer · 20.Январь.2017 10:25:09

Вот моё ) Зачем такую кучу перечислений все делают) непонятно _)
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;
}

inanutshell86 · 27.Февраль.2017 07:21:32

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

inanutshell86 · 27.Февраль.2017 07:25:34

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

inanutshell86 · 27.Февраль.2017 07:33:40

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

Tala · 27.Февраль.2017 07:59:27

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

Ineska · 27.Февраль.2017 08:01:03

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

inanutshell86 · 27.Февраль.2017 11:43:49

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

igralfo11 · 09.Апрель.2017 06:57: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;
}

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

ilmirka19 · 03.Октябрь.2017 07:43:49

Мой вариант

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

KurasovPavel · 20.Ноябрь.2017 15:51:25

Ребята,выполнил задание,как смог,хотел бы услышать экспертное мнение.Очень трудно дается тема селекторов,а именно их логика и каком случае какой из селекторов нужно применять!
в задании выдало 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;
}

nerealist · 21.Ноябрь.2017 05:55:07

Мое решение, испытание интересное!
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;
}

Ineska · 21.Ноябрь.2017 06:17:54

Pavel_Tonkovich · 22.Ноябрь.2017 13:51:15

Я решил так(пришлось попотеть с формулами, т.к. не хотел использовать контекстные селекторы классов и псевдокласс :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;
}

Ineska · 22.Ноябрь.2017 14:10:33

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

Pavel_Tonkovich · 23.Ноябрь.2017 08:30:23

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

Chikago · 08.Декабрь.2017 08:45:54

Многие прописывают класс 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;
}

Romzes · 05.Январь.2018 13:26: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::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;
}

Vengetik · 08.Январь.2018 09:49:18

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

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

DenisDolzhik · 08.Январь.2018 11:01:12

Оцените, жду критики.
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;
}