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

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

Делал это задание, все понял, кроме 2 вещей:

  1. Как все определили вот этот селектор, я сколько ни игрался, дальше .cards li не продвинулся. По какой логике все вычислили именно эти исключения? .cards li:not(.six):not(.nine) { margin-left: -15px; }
    ?

  2. Почему самый простой селектор li:last-child у меня не сработал? ( li:last-child { background-color: #339933; } ) Он там не нужен, но по самому факту не работает
    ?

Код для простоты:
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(.six):not(.nine) {
margin-left: -15px;
}

.cards li:not(.nine) {
width: 36px;
height: 54px;
}

.cards .nine {
margin-right: 30px;
margin-left: 15px;
}

.diamond:nth-child(even) {
background-color: #0099ff;
}

.seven:not(.club) {
background-color: #ff3300;
}

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

2

А попробуйте li:last-of-type - такой работает?

1 лайк
3

Кто все? Есть и другой более распространенный в решениях вариант:
.cards li:not(:first-of-type)
Здесь логика уже более понятна.

1 лайк
4

  1. Все карты, кроме 6 и 9 должны сместиться левее. Поэтому исключаем 6 и 9.

  2. Если удалить <div></div> то у последней карты будет ваш фон. Поэтому в данном испытании используется of-type.
    Разница между last-child и last-of-type в этом примере есть.

5

У меня first-of-type не работает, не достигается нужный результат. Видимо я просто логику смещений не понял, буду уповать на это) Не понял что нужно 6 и 9 смещать

6

Что разница есть - я догадываюсь. Только логику не понимаю, у меня есть группа “li”, ничто не может мне помешать применить к ним fist-child или last-child, независимо во что они обернуты. Однако тут это не так почему то(

7

Ничего не мешает. Но проблема в том, что в задании последний child - это не li. Поэтому и не работает li:last-child.

8

Т.е. в задании последний child это div? Почему же тогда, будучи обернутым в “ul” last-child и first-child прекрасно работают?

9

И первый тоже. Не знаю, у меня ul:first-child и ul:last-child не работает. Работают только ul:first-of-type, ul:last-of-type

10

il:first-child и не будет работать, у него же нет “детей”

Но вот так работать будет:

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
<li>

А как в коде было (приблизительно вот так)

<ul>
  <div>
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </div>
<li>

Не работает, и это есть большой вопрос для меня…

11

Неправда! В коде так НЕ было. Было ТАК:
<ul> <div></div> <li></li> <li></li> <li></li> <div></div> </ul>

Т.е. li не вкладывались в div-ы. И насчёт li:first-child - причём здесь есть у него ребёнки или нет? Чтобы селектор работал, li должен быть САМ ребёнком в каком-либо родителе. Поэтому я бы писал вложенность:
ul li:first-child. Тогда понятно, что свойства нужно применить к li, который является первым ребёнком ul. И тогда ясно, почему не работает этот селектор в случае, когда сверху и снизу над li идут div-ы: потому что первым ребёнком у ul тогда будет div. И чтобы он заработал, нужно заменить :first-child на first-of-type: “первый среди подобных li”

12

image.png642×756 11.4 KB

Несколько примеров по данной теме, заодно сам закреплю материал. Поправьте, если есть ошибки.

1 лайк
13

Я же сказал приблизительно. Понял, спасибо, не обратил внимания.

14

Перечитайте ещё раз селекторы. Это даже НЕ приблизительно, это КАРДИНАЛЬНО всё меняет! ))