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

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

Vengetik · 08.Январь.2018 11:15:01

Ничего необычного, кроме предпоследнего (если конечно сам додумался). Круто. Только в последнем селекторе я бы за место
.cards:first-of-type li:nth-child(2n) { background-color: #996666; }

сделал бы так:

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

Yan · 14.Январь.2018 14:43:48

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

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

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

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

А можно ли так? Или совсем по колхозному ?

Ineska · 14.Январь.2018 16:03:10

Это очень плохо. Чем короче селектор, тем лучше и правильнее.

Yan · 17.Январь.2018 19:09: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;
}

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

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

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

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

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

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

Проверьте пожалуйста, ровно ли все?

Marina_D · 29.Январь.2018 12:51:45

можно проще. у вас есть места, где вы пишете type, хотя подходит сhild, а есть наоборот.
(4n+4) - подумайте еще раз. что вы хотели сказать этим? а что этим - (3n+8)? присмотритесь, для зеленого цвета есть очень простая закономерность.

m9fleming · 15.Февраль.2018 23:19:11

У меня похожий код но немного отличается и тоже 100%

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::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(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 .ace.spade ~ .heart {
background-color: #339933;
}.cards:first-of-type li:nth-child(2n) {
background-color: #996666;
}

tetrasar · 06.Март.2018 19:16:33

Результат 100%. Прошу оценить качество и краткость?
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;
}

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

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

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

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

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