Кексби сетки 9/20

Курсы Эпичный курс «Кексби»
1

Добрый день.
Подскажите, в задании надо “Для терминов в .cat-reference, которые идут сразу за определениями, задайте отступ сверху 70px.”

<div class="cat-reference">
      <div class="container">
        <h2 class="section-title">Немного теории</h2>
        <a class="btn" href="#" title="Открыть справочник">Справочник</a>
        <dl>
          <dt>
            <h3 class="reference-title">Окрас кошек и котов</h3>
            <i class="reference-source">источник: <a target="_blank" href="https://ru.wikipedia.org">wikipedia</a></i>
          </dt>
          <dd>
            <img src="img/article-1.jpg" alt="Окрас кошек и котов" width="100" height="100">
            <p>Окрас шерсти, кожи и глаз кошки обусловлен присутствием в них пигмента меланина. Меланин находится в теле волоса в виде микроскопических гранул, которые различаются по форме, размеру и количеству, что и вызывает различия в окрасе.</p>
          </dd>
          <dt>
            <h3 class="reference-title">Кошкин дом</h3>
            <i class="reference-source">источник: <a target="_blank" href="http://kotmur.spb.ru">kotmur.spb.ru</a></i>
          </dt>
          <dd>
            <img src="img/article-2.jpg" alt="Кошкин дом" width="100" height="100">
            <p>Нужен ли кошке Кошкин дом? Свой отдельный, обособленный от пространства городской квартиры Кошкин дом? Да, нужен! Нужен особый Кошкин дом, обустроенный по ее вкусу с лесенкой, с когтеточкой, с замкнутым, своим, отдельным уголком в ее, кошкином, доме.</p>
          </dd>
        </dl>
      </div>
    </div>

Почему в CSS срабатывает конструкция

.cat-reference dd + dt {
    margin-top: 70px;
}

и не срабатывает

dd + .cat-reference dt {
    margin-top: 70px;
}

?

Upd.
Есть предположение, что во втором случае свойство применяется для dt, который расположен внутри .cat-reference, перед которым идет dd. Если это так, то возможно ли как-то расставить приоритеты, скобками, что ли, чтобы браузер понимал, что dt относится только к cat-reference, а не ко всей предыдущей строке?

2

Извините, – попытался осмыслить Ваш вопрос, и не смог понять о какой строке идёт речь.
Уточните, пожалуйста, какой результат Вам нужен…

3

Внутри блока с классом .cat-reference есть список определений dl, состоящий из трех терминов dt и трех определений dd. Необходимо задать внешний отступ сверху у терминов dt, которые идут сразу после определений dd находятся в блоке .cat-reference. HTML код я выложил, CSS два варианта - первый работает, второй нет. Возможна ли какая-то конструкция типа

dd + (.cat-reference dt) {
         margin-top: 70px;
}

чтобы сработал второй вариант?

4

Комментарии читайте медленно и внимательно…

.cat-reference dt {    /*добавит отступ всем элементам dt внутри .cat-reference*/
    margin-top: 70px;
}
.cat-reference dd+dt { /*добавит отступ всем элементам dt внутри .cat-reference, если перед dt есть элемент dd*/
    margin-top: 70px;
}
dd + .cat-reference dt { /*добавит отступ всем элементам dt внутри .cat-reference, если перед  .cat-reference есть элемент dd*/
    margin-top: 70px;
}

Последнее правило не сработает, т.к перед .cat-reference нет (и быть не может) никакого dd, а стоит <div class="features">.
Исправим правило и будет работать:

div + .cat-reference dt { /* добавит отступ всем элементам dt внутри .cat-reference, если перед .cat-reference есть элемент div */
    margin-top: 70px;
}
.features + .cat-reference dt { /* добавит отступ всем элементам dt внутри .cat-reference, если перед .cat-reference есть элемент .features */
    margin-top: 70px;
}
.features + .cat-reference dd + dt { /* добавит отступ всем элементам dt внутри .cat-reference, если перед .cat-reference есть элемент .features, и если перед dt есть dd */
    margin-top: 70px;
}

На вопрос можно ответить так:
Со скобками нельзя – нет такого синтаксиса (если я не ошибаюсь)
Без скобок, непонятно зачем, но в принципе можно:

dd + .cat-reference dt {
         margin-top: 70px;
}

Это сработает если в HTML добавить <dt></dt> перед <div class="cat-reference">
Но, это только для эксперимента – нарушается семантика, и вообще <dt> должен находится в <dl>.
В общем – бардак будет…

1 лайк
5

Все понял. Просто второй вариант ближе моей внутренней логике. Но коли нет, буду делать по первому.