Обсуждение курса «Селекторы. Часть 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;
}
Приветствую.
Есть вопрос по первому же уроку в курсе - «Объединение селекторов»
Варианты ниже дают одинаковый результат. Какой вариант более верный? Ну т.е. я понимаю, что первый более специфичный, а второй более общий. Вопрос возник, т.к. если мы бы применяли правило не к первому элементу, а к произвольному (:nth-child(x)), то второй вариант все равно работает корректно, не смотря на то, что классов .heart меньше чем элементов списка. Т.е. получается что класс применяется с оглядкой на тег в который он помещён, и если тег имеет “братьев”, то отсчет происходит от всей группы, а не только среди тех “братьев” где есть наш класс.
li:first-child.heart {
background: #99DDFF;
}
.heart:first-child {
background: #99DDFF;
}
Я понимаю, что это все несколько сумбурно написано, но такое поведение это баг или изначально задуманная фича стандарта?
И в дополнение.
Я так понимаю вот это “.class1.class2{}” и вот это “По такому же принципу можно объединять любое количество абсолютно разных селекторов” для тегов в качестве селекторов (по крайней мере в качестве второго и далее “множителя”) уже не прокатит ибо запись становится неоднозначной?
Задание 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
1 лайк
Здравствуйте.
У меня не работает проверка выполнения задания в задании Псевдоэлементы :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;. При всём при этом код рабочий, отображение корректное:
Что делать и почему так происходит?
Здравствуйте, есть вопрос по 10 заданию в Селекторы. Часть 2. Не могу понять, что я делаю не так и почему не получается пройти данный пункт. http://clip2net.com/s/3j9mZ8d >> карты увеличиваются и область появляется, а задание не засчитывается. Помогите найти ошибку пожалуйста!
Здравствуйте 2ое испытание
Объясните, пожалуйста разницу между
li:nth-of-type(4){
margin-right:30px;
margin-left:15px;
}
и
.nine{
margin-right:30px;
margin-left:15px;
}
в первом дает 100%, во втором все в куче
Правильно ли я понял что в случае последующих селекторов (селектор1 ~ селектор2) у селекторов 1 и 2 должен быть общий родитель? Иначе говоря, селектор 2 не действует за пределами своего родителя.
Можете, пожалуйста, прокомментировать код?
html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}
body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}
.cards {
position: relative;
width: 380px;
text-align: left;
}
.cards li {
width: 37px;
height: 55px;
}
.cards li::before {
font-family: “Courier”, monospace;
}
.cards li:not(:first-of-type) {
margin-left: -20px;
}
ul::after {
content: “”;
position: absolute;
right: 0;
top: 0;
display: block;
width: 37px;
height: 55px;
border: 1px dashed #33bb33;
border-radius: 5px;
}
ul li:nth-child(4n+1) {
background-color: #ffcc33;
}
ul:not(:first-of-type) li:nth-child(4n-2) {
background-color: #0099ff;
}
ul:nth-of-type(even) li:nth-child(4n) {
background-color: #ff3300;
}
.ace.spade+.heart {
background-color: #339933;
}
ul:first-of-type li:nth-child(2n) {
background-color: #996666;
}
Если вдруг вам нужна какая либо обратная связь, то на счёт данного курса могу сказать что он очень странный т.к. по мере прохожения складывается ощущение что его задача максимально вас запутать(чем ближе к финальному заданию тем сильнее каша и путаница в голове), от чего знатно пригорает. Испытание 9/20 я решал с помощью гугла причём решил используя простейшие селекторы которые есть в вашем туториале, а не теми которые намешаны в данной 2 части курса, скорее всего финальное буду решать также. Собственно пройдя данный курс я: потерял много времени, окончательно запутался с рассматриваемыми в нём селекторами.
ps Пойду поищу какой-нибудь реабилитационный “Центр помощи жертвам курса HTML Академии - §18. Селекторы. Часть 2”. 
Надеюсь дальше будет лучше.
6 лайков