@Rem36

Как такое сделать?

День добрый, подскажите пожалуйста, как сделать разные картинки у блоков. Аккардион на JQuery.

<ul class="accordion">
                        <li class="li-title">
                            <div class="accordion-header">Statics</div>
                            <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio impedit, eum possimus tempora sit consequuntur, ad repudiandae. Obcaecati natus, quam odit eveniet at pariatur ratione, quidem similique porro, cupiditate praesentium!</div>
                        </li>
                        <li class="li-title">
                            <div class="accordion-header">Inbox</div>
                            <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio impedit, eum possimus tempora sit consequuntur, ad repudiandae. Obcaecati natus, quam odit eveniet at pariatur ratione, quidem similique porro, cupiditate praesentium!</div>
                        </li>
                        <li class="li-title">
                            <div class="accordion-header">Team</div>
                            <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio impedit, eum possimus tempora sit consequuntur, ad repudiandae. Obcaecati natus, quam odit eveniet at pariatur ratione, quidem similique porro, cupiditate praesentium!</div>
                        </li>
                        <li class="li-title">
                            <div class="accordion-header">Settings</div>
                            <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio impedit, eum possimus tempora sit consequuntur, ad repudiandae. Obcaecati natus, quam odit eveniet at pariatur ratione, quidem similique porro, cupiditate praesentium!</div>
                        </li>
                        <li class="li-title">
                            <div class="accordion-header">Feed</div>
                            <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio impedit, eum possimus tempora sit consequuntur, ad repudiandae. Obcaecati natus, quam odit eveniet at pariatur ratione, quidem similique porro, cupiditate praesentium!</div>
                        </li>
                    </ul>


.accordion-header:before{
    content: url('img/mail.png');
    float: left;
    margin-right: 25px;
}


Но если сделать

.accordion-header:nth-child(2):before{
    content: url('img/2.png');
    float: left;
    margin-right: 25px;

.accordion-header:nth-child(3):before{
    content: url('img/1.png');
    float: left;
    margin-right: 25px;

.accordion-header:nth-child(4):before{
    content: url('img/3.png');
    float: left;
    margin-right: 25px;
}


Так не работает
  • Вопрос задан
  • 715 просмотров
Решения вопроса 1
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
.accordion li:nth-child(2) .accordion-header::before{
    content: url('img/2.png');
    float: left;
    margin-right: 25px;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
fomenkogregory
@fomenkogregory
Юниор софтварный инженер
Применяй nth-child к li-title, погугли что он делает для начала, станет понятно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы