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


#1

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

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

Испытание: вторая раскладка (как вам мое выполнение?)
#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-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;
}

#3

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


#4

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

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



#5

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


#6

Мой вариант:

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


#7

Может пому понадобится.
.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;
}


#9

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

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; /коричневый/


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

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

#12

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

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


#13

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


#14

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

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

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


#15

Мое решение

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


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

#17

Мое решение :wink:

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


#18

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

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


#19

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


#20

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


#21

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

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; /* фиолетовый */
}