← Комьюнити

Курс html/css вопрос по группировке блоков. что не так?

Валентин Черний3 ответов
#html#css

1. выполняю домашнее задание, пункт 53
ниже мой код решения 

<h2>Отзывы о фильме</h2>
				<div class="reviews">
					<div class="review_name">Сергей</div>
					<div class="review_text"> Отличный фильм, 3 часа пролетели не заметно.</div>
					<div class="review_name">Дмитрий</div>
					<div class="review_text"> После фильма Начало, я с не терпением ждал еще работ от Кристофера Нолана. Интерстеллар меня впечатлил.</div>
				</div>

Система отвечает, что это неверно и требует, чтоб каждый отзыв лежал в своем персональном блоке с классом reviews.
Зачем? Получается, что у нас вместо одного блока куда будут входить все обзоры, будет отдельный блок, для каждого обзора. 
2. второй вопрос касается пукта 52. привожу пример из Вашего урока

.reviews .review_text {
  padding-top: 2%;
  padding-bottom: 2%; 
  padding-left: 2%;
}

зачем писать первый класс .reviews? мы же тут описывает исключительно стиль текста отзыва. только .review_text {...} тоже замечательно работает
Такие нюансы, к сожалению в уроках не обьясняются

3 ответов

Я не автор, но попробую ответить. 

reviews может быть не только к фильмам, но и например к чему-то другому, для простоты возьмем сериалы:

<div class="reviews_serials">
    <div class="review_name">
        Сергей
    </div>
    <div class="review_text">
        Отличный фильм, 3 часа пролетели не заметно.
    </div>
</div>

например, я хочу чтобы отзывы на сериалы были совсем другими по стилям, но названия классов хочу оставить теми же: .review_name и .review_text. Если убрать review перед ними, тогда везде где будут классы с названием .review_name и .review_text применены стили. Накидал пример:

.reviews_serials {
  margin-bottom: 10%;
  font-size: 1em;
}

.reviews_serials .review_name {
  background-color: black;
  color: green;
  padding: 1%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.reviews_serials .review_text {
  padding-top: 2%;
  padding-bottom: 2%; 
  padding-left: 2%;
}

Можно сильнее заморочиться, но для новичков пойдет. 

student_Cx8W3815▲ 2

Да

student_Cx8W3815▲ 1

Спасибо за ответ
То есть запись показанную в уроке стоит понимать следующим образом -  стиль для класса review_text являющегося дочерним (!!!) для блока с классом reviews. И только для него! Если блок с классом review_text, будет входить в блок с другим, отличным от reviews, то данный стиль на него распространяться не будет.
Я правильно понял?

Валентин Черний

Ваш ответ

Войдите, чтобы ответить