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


#1

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


#2

В испытаниях подгонял в боди отступы и паддинги, чтобы добиться 100%, почему так?
html, body{
margin:0;
padding:0;
}
body{
min-width:350px;
height:280px;
padding:20px 0px 30px;
}
.cards li:not(:first-of-type) {
margin-left:-15px;
}
.cards li:not(.nine){
width:36px;
height:54px;
}
.cards li:nth-of-type(4) {
margin-right:30px;
margin-left:15px;
}
.nine~li.heart{
background:#ffcccc;
}
.cards .diamond:not(.nine):not(.king):not(.seven):not(.jack){
background:#ccffcc;
}
.cards .seven:not(.club){
background:#ccffff;
}
.cards .eight.heart, .cards .ace.spade, .cards .jack.diamond {
background:#ffffcc;
}


#3

Приветствую.

Есть вопрос по первому же уроку в курсе - «Объединение селекторов»

Варианты ниже дают одинаковый результат. Какой вариант более верный? Ну т.е. я понимаю, что первый более специфичный, а второй более общий. Вопрос возник, т.к. если мы бы применяли правило не к первому элементу, а к произвольному (:nth-child(x)), то второй вариант все равно работает корректно, не смотря на то, что классов .heart меньше чем элементов списка. Т.е. получается что класс применяется с оглядкой на тег в который он помещён, и если тег имеет “братьев”, то отсчет происходит от всей группы, а не только среди тех “братьев” где есть наш класс.

li:first-child.heart {
background: #99DDFF;
}

.heart:first-child {
background: #99DDFF;
}

Я понимаю, что это все несколько сумбурно написано, но такое поведение это баг или изначально задуманная фича стандарта?


#4

И в дополнение.

Я так понимаю вот это “.class1.class2{}” и вот это “По такому же принципу можно объединять любое количество абсолютно разных селекторов” для тегов в качестве селекторов (по крайней мере в качестве второго и далее “множителя”) уже не прокатит ибо запись становится неоднозначной?


#5

Задание 4/20 «Псевдокласс :nth-last-child» видимо содержит баг, т.к. верная раскраска карт получается только при и вот таком решении:
.cards:nth-last-child(2) li {
background: #FFFF99;
}

Тогда как при указании вместо класса тега, получаем раскраску не только нужного ряда, но и кусков других рядов.
ul:nth-last-child(2) li {
background: #FFFF99;
}
https://img-fotki.yandex.ru/get/15525/49406249.a9/0_e35ad_8256276b_orig

ul:nth-last-child(4) li {
background: #FFFF99;
}
https://img-fotki.yandex.ru/get/15596/49406249.a9/0_e35ae_5e973f90_orig


#6

Здравствуйте.
У меня не работает проверка выполнения задания в задании Псевдоэлементы :first-line и :first-letter [17/20].
Защитывается проверка для :first-line, а для :first-letter не защитывается.
Мой код:
p::first-line{
font-style:italic;
}
p::first-letter{
font-size:30px;
float:left;
color:red;
margin-right:5px;
line-height:30px;
font-family:Georgia, ‘Times New Roman’, Times, serif;
}
Проверка не работет и при написании margin-right:5px;, и при написании padding-right:5px;. При всём при этом код рабочий, отображение корректное:

Что делать и почему так происходит?


#7

Здравствуйте, есть вопрос по 10 заданию в Селекторы. Часть 2. Не могу понять, что я делаю не так и почему не получается пройти данный пункт. http://clip2net.com/s/3j9mZ8d >> карты увеличиваются и область появляется, а задание не засчитывается. Помогите найти ошибку пожалуйста!


#8

Здравствуйте 2ое испытание
Объясните, пожалуйста разницу между
li:nth-of-type(4){
margin-right:30px;
margin-left:15px;
}
и
.nine{
margin-right:30px;
margin-left:15px;
}
в первом дает 100%, во втором все в куче


#9

Правильно ли я понял что в случае последующих селекторов (селектор1 ~ селектор2) у селекторов 1 и 2 должен быть общий родитель? Иначе говоря, селектор 2 не действует за пределами своего родителя.