Как использовать селектор nth-child?

Как можно правильно использовать nth-child для стилизации переносов строк в адаптивной вёрстке так, чтобы они отображались только в определенных версиях устройств (мобильной, планшетной, десктопной)? Как стилизовать br с классом mobile-tablet-br, чтобы он показывался только в мобильной и планшетной версиях? Существующие попытки с использованием nth-child для этой цели не дали ожидаемого результата. Как можно стилизовать br внутри определенного блока независимо от других блоков?
  • 8 мая 2024 г. 17:50
Ответы на вопрос 2
Для использования селектора nth-child для стилизации переносов строк в адаптивной вёрстке, можно добавить классы к переносам строк и использовать комбинацию селекторов для определения, в каких версиях устройств они должны отображаться.

Пример:

```
/* Стилизация переносов строк для десктопной версии */
.br-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .br-desktop {
        display: block;
    }
}

/* Стилизация переносов строк для мобильной и планшетной версии */
.br-mobile-tablet {
    display: none;
}

@media screen and (max-width: 767px) {
    .br-mobile-tablet {
        display: block;
    }
}
```

Для стилизации br с классом mobile-tablet-br в мобильной и планшетной версиях, можно использовать следующий код:

```
/* Стилизация переносов строк для мобильной и планшетной версии */
.br-mobile-tablet {
    display: none;
}

@media screen and (max-width: 767px) {
    .br-mobile-tablet {
        display: block;
    }
}
```

Если существующие попытки с использованием nth-child не дали ожидаемого результата, возможно, проблема заключается в неправильном использовании селекторов или в порядке расположения стилей в CSS файле. Убедитесь, что правильно заданы условия отображения элементов для различных версий устройств.

Для стилизации br внутри определенного блока независимо от других блоков, можно добавить класс или идентификатор к родительскому элементу и использовать его в комбинации с селектором nth-child. Например:

HTML:
```
<div class="container">
    <br>
    <br>
</div>
```

CSS:
```
.container br {
    display: none;
}

.container br:nth-child(1) {
    display: block; /* Показывать только первый br внутри блока с классом container */
}
``` 

Таким образом, можно более точно управлять отображением переносов строк и других элементов в зависимости от необходимых условий и требований адаптивного дизайна.
зачем нужен 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;
}
Похожие вопросы