[9/20] 100%. НО есть вопрос

Курсы §18. Селекторы. Часть 2
1

Выполнил на 100%, но имеется вопрос: прилагаю мой код и альтернативную строчку к одному из селекторов. Не могу понять, почему она работает. прошу объяснений.

Мой код:
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;
}

ul li:not(:nth-of-type(1)) {
    margin-left: -15px;
}

ul li:not(:nth-of-type(4)) {
    width: 36px;
    height: 54px;
}

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

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

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

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

Для цвета #0099ff нашел альтернативное задание на форуме. Но никак не могу понять его логику:
.diamond:nth-child(2n){
background-color: #0099ff;
}

Прошу помощи в объяснении. Почему nth-child вообще работает если в начале и конце списка есть дивы.

2

прилагаю HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: первая раскладка</title>
        <link rel="stylesheet" href="/assets/course57/course.css">
    </head>
    <body>
        <div></div>
        <ul class="cards">
            <div></div>
            <li class="six heart"></li>
            <li class="seven spade"></li>
            <li class="eight club"></li>
            <li class="nine diamond"></li>
            <li class="ten spade"></li>
            <li class="jack heart"></li>
            <li class="queen club"></li>
            <li class="king spade"></li>
            <li class="ace diamond"></li>
            <div></div>
        </ul>
        <ul class="cards">
            <div></div>
            <li class="six spade"></li>
            <li class="seven club"></li>
            <li class="eight diamond"></li>
            <li class="nine heart"></li>
            <li class="ten diamond"></li> 
            <li class="jack club"></li>
            <li class="queen spade"></li>
            <li class="king club"></li>
            <li class="ace heart"></li>
            <div></div>
        </ul>
        <ul class="cards">
            <div></div>
            <li class="six diamond"></li>
            <li class="seven heart"></li>
            <li class="eight spade"></li>
            <li class="nine club"></li>
            <li class="ten heart"></li>
            <li class="jack spade"></li>
            <li class="queen diamond"></li>
            <li class="king heart"></li>
            <li class="ace club"></li>
            <div></div>
        </ul>
        <ul class="cards">
            <div></div>
            <li class="six club"></li>
            <li class="seven diamond"></li>
            <li class="eight heart"></li>
            <li class="nine spade"></li>
            <li class="ten club"></li>
            <li class="jack diamond"></li>
            <li class="queen heart"></li>
            <li class="king diamond"></li>
            <li class="ace spade"></li>
            <div></div>
        </ul>
        <div></div>
    </body>
</html>
3

А кто сказал, что с дивами селектор не работает совсем? Работает. Только дивы участвуют в нумерации. Селектор говорит, что будет выбран каждый четный .diamond.
Посчитайте, с учетом дивов, на каких местах находятся li.diamond в последней строке.

4

Добрый день. С селекторами разобрался, прошел испытание, но остался вопрос что касается поведения li. Почему когда задаем:

.cards li:not(:nth-of-type(1)) {
    margin-left: -15px;

карты перекрывают друг друга. Дело в: position relative / absolute и z-index?

5

Да, вы правы. Дело в z-index, который работает только при явном позиционировании.

1 лайк