Вопросы по последнему заданию

[konstantin1984]

Добрый день!
У меня несколько вопросов. Подскажите, пожалуйста.
Я так и не понял сути, когда #info-title прописывается через запятую. Я подсмотрел это на форуме, но вроде мы не изучали в курсе пропись селекторов через запятую.

Почему не срабатывает .info div .fact, а только .profile div .fact. Ведь первое - это ближайший родитель.

Ну и последнее. Я застрял на расстановке картинок. Я думаю, во всем виноват отступ, который прописан в #miska. И думаю, он убирается путем придания приоритета <h2 style=.
Но как это сделать, я не понимаю.
вот мой код:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2, #info-title{
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile div .fact {
padding: 10px;
background: white;
}

.profile div .fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

div .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle {
background: #e74c3c;
}

[Alexey_Ivanov]

Добрый день! Уже не помню, где говорится или приводится в примерах, что если селекторы имеют одинаковые свойства, то их можно прописывать одним правилом, перечисляя их через запятую. Но это полезная вещь, поэтому запоминайте.
Далее, я не вижу у Вас в коде .profile div fact (без точки перед fact), однако данный селектор действительно работать НЕ будет, т.к. fact - это не тег, а класс, а любой класс требует перед собой точку, как признак. Другой вопрос, что Вы не понимаете разницу между div .class и div.class (т.е. с пробелом или без между div и названием класса). Так вот, если пробел есть, то он показывает, что .class ВЛОЖЕН в div, т.е. есть ещё один блок div, который стилизуется с помощью .class, т.е. является его ДОЧКОЙ. А если нет - то .class относится к самому div, т.е.: <div class="class">. На последнее - если свойство задано непосредственно конкретному тегу в HTML через атрибут style, то победить его можно только через !important.

[konstantin1984]

Алексей, спасибо. Но там на самом деле опечатку я сделал с точкой. Я имел ввиду, что ближайший по древу в этом задании идет класс .info, а не .profile. Но работает только последний, самый дальний.

[Alexey_Ivanov]

Попробовал понять, о каком .info div .fact и .profile div .fact Вы говорите - по-моему, про белые строки в описании, так? Ну, не работает, потому что злобные коты Вам испортили всё через .profile div.fact(ситуация БЕЗ ПРОБЕЛА!!!). Поэтому, если Вы напишите .info div.fact (тоже БЕЗ пробела), то Вы победите.

[konstantin1984]

Алексей, прошу прощения. Мне уже как-то неловко перед вами. Мы говорим на разных языках, наверное. Для вас это также легко, как для меня тяжело))
В HTML:
<div class="profile">
<div class="photo">
<img src="/assets/course66/cat_walk.png" alt="">
<span class="button stroke">Погладить</span>
<span class="button feed">Накормить</span>
<span class="button startle">Напугать</span>
</div>
<div class="info">
<h2 id="info-title">Общая информация</h2>
<div class="fact">
<div class="title">Имя</div>
<div class="value">Феликс</div>

Логично думать, чтобы поменять цвет “Имя”, нужен селектор .info div .fact. Но он не работает, а работает .profile div .fact, который казалось бы менее специфичен.
А с пробелами я больше запутался. Я считал, что между тегами и классами в селекторе всегда нужны пробелы. Нас так этот курс учит.
Мне еще непонятно, для чего это CSS-правило
.fact::after {
content: “”;
display: table;
clear: both;

[Ineska]

Кнопка для форматирования кода в редакторе сообщений </>.

[konstantin1984]

Спасибо. Еле справился. Там получается нужно выделять каждое предложение и жать Ctrl+Shift+C? Я если весь текст выделяю, эта функция не работает

[Ineska]

Перед самим кодом пропустите одну строку, тогда оформится правильно.

[Alexey_Ivanov]

Константин, неловко быть не может: как говорил мой преподаватель философии, “НЕТ глупых вопросов (!), бывают глупые ответы” Желание разобраться досконально только похвально. А насчёт того, что мне легко… Ну, как говорится, легко всегда, когда разберёшься. Но всё приходит с трудом. Порой упорным и не сразу. Иногда нужно время для обдумывания и понимания. А иногда - сделать 500 раз одно и то же. Или попытаться кому-то что-то объяснить. Это развивает. Итак, а теперь продолжим наш диалог.
Так вот, возвращаюсь к вопросу. Почему что работает или не работает. Дело в том, что пробелы в тексте селектора значат, повторюсь, то, что каждый последующий элемент на строке ВЛОЖЕН в предыдущий, т.е. они идут по иерархии вниз. Пример возьмём из этого же задания. Селектор .profile div .fact {} можно расшифровать так: "Применить свойства из данного правила к блоку с классом .fact, который рождается из блока div, который, в свою очередь рождается из блока с классом .profile. Т.е. получается иерархия: в самом верху находится блок с классом .profile (cтвол дерева), он даёт одну из ветвей - блок div (а теперь обратите внимание - это именно тот div c классом .info! Ведь в селекторе можно использовать название и тега, а не только его класса), а эта ветвь - блок div (он же div с классом .info) - рождает ещё одну ветвь: блок с классом .fact.

[Alexey_Ivanov]

А теперь попробуем проследить иерархию Вашего селектора .info div .fact, который не работает. Итак, из .info рождаются div-ы (т.е. они ниже по иерархии). Дальше, из какого-то div-a должен родиться ещё один div c классом .fact, т.е. должен быть ЕЩЁ ниже один div c классом .fact. Но его нет. Вот поэтому Ваш селектор и не работает. А для того, чтобы он заработал, нужно ликвидировать пробел и написать второй и третий элемент селектора ВМЕСТЕ: .info div.fact Она будет расшифровываться так: "Применить свойства правила к блоку div c классом .fact, который (этот <div class="fact"></div>) рождается из .info! Разницу чувствуете в расшифровках? Таким образом именно этот ПРОБЕЛ здесь является критическим фактором, который приводит к тому, что Ваш селектор не работает.

[Alexey_Ivanov]

[Alexey_Ivanov]

Ой, картинки прикрепились в обратном порядке:fearful: Поэтому смотрите СНИЗУ вверх:relaxed: А по поводу .fact::after - это использование псевдокласса при классе, тема “Селекторы-2” платного раздела. Это распорка для родительского контейнера, чтобы он не схлопнулся после float всех элементов (тема “Сетки” бесплатного раздела). Но в данном задании оно не играет никакой роли для его решения, поэтому не обращайте внимания пока.

[konstantin1984]

Алексей, спасибо огромное за столь доходчивое разжевывание))) В сути использования/не использования пробела я с вашей помощью теперь разобрался и запомню навсегда))) Мне кажется в данном курсе такого не было.
А по поводу самого задания. Вчера к вечеру такая каша в голове была. Сегодня утром встал со светлой головой и решил буквально за 2 минуты. Даже удивился, почему не смог вчера решить))
Алексей, еще раз спасибо))

[Alexey_Ivanov]

На здоровье! Главное, не отчаиваться и не бояться спрашивать, даже порой и кажущиеся глупыми на первый взгляд вещи.