Комбинации для пересечения. Селекторы часть 2, 5/20


#1

Обратил внимание, что для выбора пересечения 2х селекторов нужно писать их в определенном порядке. т.е.: такой селектор сработает: (подразумевается что все теги в html присутствуют)

.cards:first-of-type li:first-child  {
background: #0099ff;
}

А такой не сработает, хотя формально мы просто поменяли местами селекторы (пробел перед точкой, как оказалось, не играет роли)

li:first-child  .cards:first-of-type  {
background: #0099ff;
}

#2

Не запутывайте других, пожалуйста. Порядок селекторов имеет значение, поскольку браузер читает их справа налево.
Повторите тему “Селекторы, Часть 1”, чтобы не делать ошибочные выводы.


#3

Можно было подумать и иначе, теоретически, в математике например перемена мест слагаемых роли не играет, но тут не так.
П.с. В посте я спрашивал, а не утверждал.


#4

В посте не было знака вопроса)


#5

Ну, как бэ порядок селекторов - это не сумма, чтобы вспоминать правило про перемену мест слагаемых ))


#6

Здесь речь о том, какую линию я выберу первую, горизонтальную, или вертикальную, что бы в итоге получился крест как будто.


#7

А можно в этом примере (задание 3) выбрать сперва вертикальные элементы, а потом горизонтальные? У меня получилось только наоборот(


#8

Напишите свой код, посмотрим.


#9

Я хотел вот так:

.cards li:first-of-type ul:first-of-type li {
background-color: #0099ff;
}
Т.е. первый селектор выбирает столбец, вертикаль (потенциально), 2ой ряд, горизонталь.


#10

Добрый вечер. Вариантов решения похоже несколько. Я решаю эти задачи по другому, не так как в ответах. Интересно, есть ли критерий: правильно-непрвильно. Или если рботает, то правильно?
li:first-of-type {
background-color: #ff3300;
}

.cards:first-of-type>li {
background-color: #339933;
}

li.ace.heart:not(:nth-child(5)) {
background-color: #0099ff;
}