Как применить nth-child?

Question

[Torcher]

Есть вёрстка, часть которой надо адаптивно стилизовать по каскаду. В мобильной, планшетной и десктопной версии переносы строк идут по разному, не понимаю как правильно использовать тут nth-child.
Для примера: мне нужно, чтобы все <br> с классом .mobile-br показывались только в мобильной версии, .tablet-br только в планшетной, .desktop-br только в десктопной и .mobile-tablet-br в мобильной и планшетной. Конкретно интересует, как стилизовать <br> с классом mobile-tablet-br так, чтобы он показывался только в мобильной и планшетной версии. Пытался сделать конструкцию вида:

.about__item p:nth-child(2) br:nth-child(2) {
    display: inline;
  }

или

.about__item:nth-child(2) p br:nth-child(2) {
    display: inline;
  }

но на <br> с классом .mobile-tablet-br это не работает. Она воздействует в принципе на оба <br> в обоих блоках <p>. Как мне стилизовать <br> во втором блоке .about-item, независимо от переносов в первом? Надеюсь не криво объяснил

<div class="about__content">
          <h2>О нас</h2>
          <div class="about__item">
            <h3>История компании</h3>
            <p>В далёком 2000 году мы начали заниматься туризмом — походы, поездки,
              восхождения,
              <br class="mobile-br">нам это настолько понравилось,
              <br class="mobile-br">что мы этим стали жить.
              <br class="desktop-br">Спустя 5 лет,
              <br class="tablet-br">в 2005 году мы основали компанию, чтобы показывать людям удивительные места нашей
              страны.</p>
          </div>
          <div class="about__item">
            <h3>Наша цель</h3>
            <p>Подарить вам незабываемые впечатления от похода в горы.
              <br class="mobile-br">Мы берём на себя
              <br class="mobile-tablet-br">все организационные вопросы.
              <br class="mobile-br">При организации
              <br class="tablet-br">мы обязательно учтём
              <br class="desktop-br">все ваши пожелания.
              <br class="mobile-br">Вам останется только наслаждаться незабываемым приключением
              <br class="mobile-br">в приятной компании.</p>
          </div>
        </div>

Answer 1

[Виктор]

зачем нужен nth-child, если есть конкретные классы и можно управлять mobile-br, tablet-br, desktop-br и mobile-tablet-br?

media запросы им поставить и все.

UPD
Если все-же нужно:

/* mobile-br */
.about__item:last-child > p br:nth-child(1),
.about__item:last-child > p br:nth-child(3),
.about__item:last-child > p br:nth-child(6),
.about__item:last-child > p br:nth-child(7), {
    display: inline;
}

/* mobile-tablet-br */
.about__item:last-child > p br:nth-child(2), {
    display: inline;
}

/* tablet-br */
.about__item:last-child > p br:nth-child(4), {
    display: inline;
}

/* desktop-br */
.about__item:last-child > p br:nth-child(5), {
    display: inline;
}

Comments

[Torcher]

Я же говорю, нужно стилизовать по каскаду, т.е. вообще не используя классы для тегов<p> и <br>. Я их тут указал, чтобы нагляднее было.

[Виктор]

Torcher, кому нужно и зачем?

[Torcher]

Виктор, мне нужно, это требование ТЗ. Я не понимаю, как воздействовать на элементы только во втором блоке .about__item p, независимо от первого, за этим и пришёл.

[Виктор]

Torcher, обновил ответ

[Torcher]

Виктор, вот эта запись

.about__item > p br:nth-child(2), {
    display: inline;
}

будет воздействовать на оба вторых <br> в своих блоках, т.е. на <br> с классом .mobile-br в первом блоке и с классом .mobile-tablet-br во втором блоке. Получается мне надо будет отменить все <br> с классами .mobile-br в планшетной версии, а этот оставить, но и он скроется.

[Torcher]

Виктор, вообще не понимаю, почему тут nth-child не работают.

.about__content .about__item:nth-child(2) p br:nth-child(2)

Т.е. я пишу: дай мне во втором по порядку блоке about__item внутри .about__content тег <p> и в нём второй тег<br>, но CSS меня не понимает. Почему так?

[Torcher]

Но методом тыка сработала запись .about__item:nth-child(3) p br:nth-child(2)
Я вообще запутался, как это работает. Это же второй по порядку элемент, а не 3.

[Виктор]

Torcher, я использовал :last-child