§8. Селекторы


#1

Обсуждение курса «Селекторы»


#2

Один большой вопрос, в котором не могу разобраться.
Объясните, пожалуйста, когда ставятся точки, а когда - не ставятся

.ul
.li

это же cовсем не то же самое, что
ul
li

В чем разница, как отличать, в чем принципиальное это различие?


#3

всё дело в том, что с точкой ты ставишь Класс, а без Тег!


#4

Добрый вечер! В уроке :nth-child и контекстные селекторы [11/18] я применила вот такой код

li
{background-color:white;}
.shooter-1 li:nth-child(2), .shooter-1 li:last-child, .shooter-2 li:first-child
{background-color:red;}

Корректен ли он? В “показать ответ” код длиннее и задается для каждой мишени.


#5

И еще один вопрос по поводу динамических эффектов при помощи :hover
Стоит задача: сделать так, чтобы подсвечивались очки. Согласно предыдущему уроку код такой
strong:hover {color: #0088cc;}
Ввожу, очки подсвечиваются, но цель не засчитывается. Почему?


#6

Если я правильно понял вопрос, фишка в том, что этим стилем ты задал подсветку при наведении курсора именно на очки, а задача стоит в том, что бы они подсвечивались при наведении на строку таблицы, тогда все задается через

tr:hover strong{
color:#0088cc;
}.

Как то так вроде.


#7

здравствуйте вот решил написать вам письмо и свою историю про селекцию
лет 10 назад я из косточки посадил фрукт цитруса точно не помню то ли мандарин гибрид то ли еще что
но факт что цитрус посадил я его дома в горшок рос он в горше года три был маленький см 6-7
на нем был всегда один листочек он то и дело засыхал то опять вырастал
и решил я его пересадить на дачу (дмитров) когда я разбил горшок корней было больше чем земли 1.5 кг белые белые как черви тонкие
посадил я этот росток и он стал расти и за год вырос на 1.5 метра и рос он года 3 или 4 точно не помню и пришла мне мысль
привить к нему яблоню потому что плодов на дереве не было и как правило я узнавал цитрус и яблоня вещи не совместимы
росток яблони к нему привился и это дерево все полностью зацвело причем не там где привили а полностью выросли яблоки очень большие и очень много грам по 300 и задняя часть яблока была вдавлина см на 2 когда я разрезал яблоко пополам я не обнаружил там косточек если они и были но видно их не было вкус яблока очень вкусный и сладкий плоды это дерево дает уже три года.
у меня вопрос почему яблоки стали цвести по всему дереву а не там где привили
и можно узнать вообще что это за дерево поточней
спасибо что прочитали мою историю .
и куда мне обратится


#8

Как-то абстрактненько с этими биатлонистами, как по мне, информация лучше усваивалась бы на более наглядном примере, например, на каком-нибудь элементе сайта.


#9

li{
background-color: white;
}
.shooter-1 .third + li,
.shooter-2 .first + li{
background-color: red;
}
.shooter-2 .third + li{
background-color: yellow;
}
а так можно?


#10

Здравствуйте, такой вопрос.

.shooter-1 li:nth-child(2), .shooter-1 li:nth-child(5) {
background-color: #f00;
}

Можно ли как нибудь опустить во втором случае shooter-1 ?
Имею в виду, есть какой нибудь более короткий вид записи?


#11

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


#12

Повеселили :smile: своей историей. Я рассчитывал на другую концовку рассказа.


#13

Почему же, конкретно в этом примере можно. С помощью формулы. Нужна 2-я и 5-я, значит из общего вида :nth-child(an+b) решается система линейных уравнений из которых находится значение а и b. Как результат можно записать:
.shooter-1 li:nth-child(3n+2) {…}


#14

Да, правы, с помощью формулы можно.


#15

А Вы не в курсе, есть ли возможность прервать выполнение формулы на каком-то конкретном значении N ?


#16

С помощью css - точно нет.


#17

Спасибо


#18

Заметил мелкую ошибку, если это можно считать ошибкой.

Не “fourth”, a “forth”.


#20

Пример. Есть два элемента списка:

<li class="hit"></li>
<li class="miss"></li>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селектор .hit + li тоже применит стили к элементу с классом miss, а селектор .miss + .hit не сработает.

Внимание вопрос:
Почему .hit + li тоже применит стили к элементу с классом miss, ведь hit и miss не соседние?


#21

А какие?