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

Islambek_Gafurov · 27.Март.2016 03:57:09

Прошёл испытание, не было никаких сложностей было даже очень интересно большое спасибо авторам курса! Меня волнует, хорошо ли освоил курс? потому что часто пользовался одной и той же пвесдоклассамы. Есть ли у вас профессиональные решение этой задачи?

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

li:nth-of-type(2n),li:nth-of-type(3),li:nth-of-type(5),li:nth-of-type(7),li:nth-of-type(9),li:nth-of-type(11),li:nth-of-type(13){
    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-of-type(1),li:nth-of-type(4n)+li{
    background: #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: #0099ff;
}

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

 .queen,ul:nth-of-type(3) .six.heart {
    background: #339933;
}

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

Alexey_Fedarovich · 28.Март.2016 18:56:40

Может мое решение будет интересно )

    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.cards li:nth-child(4n+1) {
    background: #ffcc33;
}

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

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

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

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

Islambek_Gafurov · 29.Март.2016 17:50:03

великолепно!

Elbar · 08.Май.2016 04:51:54

Мое решение ))

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

.cards li:nth-child(2n -5):not(:nth-child(3)):not(:nth-child(7)):not(:nth-child(11)) {
    background: #ffcc33;
}

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

ul:nth-child(5) li:nth-child(2n) { background: #ff3300;}

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

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

Elbar · 08.Май.2016 04:54:04

Хорошее решение!!

KIRILL_VASILEVICH · 16.Июнь.2016 00:11:12

Мой вариант:

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

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

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

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

Antosha · 20.Июнь.2016 19:39:51

Может пому понадобится.
.cards li:not(:nth-child(1)) {
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-child(4n+1) {
background-color: #ffcc33;
}

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

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

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

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

Step174 · 01.Август.2016 19:12:06

Вот мое решение. Может будит полезно.

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-child(4n+1) {
background-color: #ffcc33; /желтый/
}

li:nth-child(4n+2){
background-color: #0099ff; /синий/
}

ul:nth-of-type(2n) li:nth-child(4n+4) {
background-color: #ff3300; /красный/
}

ul:nth-of-type(3) li:nth-child(3n+8) {
background-color: #339933; /зеленый/
}

ul:first-of-type li:nth-child(2n) {
background-color: #996666; /коричневый/

RoveR · 09.Август.2016 13:45:27

.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:nth-child(4n-3) {
    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;
}

.ace.spade ~ .heart {
    background-color: #339933;
}

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

V.P · 21.Сентябрь.2016 17:06:29

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::after{
    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-3) {
    background-color: #ffcc33;
}

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

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

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

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

Rumpelstiltskin · 06.Октябрь.2016 20:41:11

Ну, собственно, моё решение.

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

.cards 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) li:nth-child(7) ~ li:nth-last-child(3n) {
background-color: #339933;
}

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

Kyle_Butler · 09.Октябрь.2016 18:28:29

/yellow/
.cards li:nth-child(4n+1) {
background-color: #ffcc33;
}

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

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

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

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

Marina · 19.Октябрь.2016 19:53:10

Спасибо за задание, было очень увлекательно! Единственная проблема была в том, что могла решать задание только в одном браузере - хроме, остальные не поддерживали формат

Вот мой вариант:

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

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

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

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

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

sergeyha · 28.Октябрь.2016 16:40:24

Мое решение

li:nth-child(n+2){
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(1), li:nth-child(4n+5){
background-color: #ffcc33;
}

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

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

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

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

KeyD · 20.Декабрь.2016 14:41:05

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

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

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

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

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

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

vetalil18 · 24.Декабрь.2016 13:57:49

Мое решение

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

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

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

.ace.spade~ .heart {
background-color: #339933;
}

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

mkuzminov · 31.Декабрь.2016 19:45:37

стоит сменить на
.cards:not(:first-of-type) li:nth-child(4n+2)
синего цвета нет в первой строке, только потому, что он перекрывается коричневым, т.к. он (коричневый) расположен ниже в коде, стоит поменять код или усилить синий селектор и цвета “поедут”

формулу 2n можно заменить на even т.к. она более точно отражает суть, “каждый второй” и “четный”

Wolken · 05.Январь.2017 11:46:14

где задаем background можно же просто задать ul зачем ставить .cards ??

mkuzminov · 05.Январь.2017 19:01:50

В данном, конкретном случае, да можно
поставив ul мы выбиваем все списки на странице, .cards только списки с данным классом, если на странице будет несколько списков, то без вариантов только .cards
Учимся заранее выбирать только нужное

stiglitZzz · 11.Январь.2017 14:35:01

О даа!! я наконец понял как работают выражения!
Оцените
@Ineska надеюсь сейчас , я ничего не усложнил ?

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

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

li:nth-child(4n+1)
{
background-color: #ffcc33; /* желтый */
}

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

.cards:not(:nth-of-type(odd)) li:nth-child(4n) {
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; /* фиолетовый */
}