Не пойму, что не так?

Question

[Rem36]

<ul class="list-items">
                    <li class="item">
                        <div class="img-and-fon">
                            <div class="img-con-menu"><img src="img/2.png"></div>
                            <div class="fon-for-icon"><p>
                                Справочная информация
                            </p></div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="img-and-fon">
                            <div class="img-con-menu"><img src="img/1.png"></div>
                            <div class="fon-for-icon"><p>Научно-методические материалы</p></div>
                        </div>
                    </li>

                    <li class="item">
                        <div class="img-and-fon">
                            <div class="img-con-menu"><img src="img/3.png"></div>
                            <div class="fon-for-icon">
                                <p>Информационный
                                    стенд</p>
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="img-and-fon">
                            <div class="img-con-menu"><img src="img/5.png"></div>
                            <div class="fon-for-icon">
                                <p>Журнал
                                    использованных
                                    ампул</p>
                            </div>
                        </div>
                    </li>

Ни одно перечисленное ниже не работает.

.item p:nth-child(4){
    margin-top: 40px;
    margin-right: 60px;
}

.item.img-and-fon.fon-for-menu p:nth-child(4){
    margin-top: 40px;
    margin-right: 60px;
}

.item .img-and-fon .fon-for-menu p:nth-child(4){
    margin-top: 40px;
    margin-right: 60px;
}

li.img-and-fon.fon-for-menu p:nth-child(4){
    margin-top: 40px;
    margin-right: 60px;
}

li.item .img-and-fon .fon-for-menu p:nth-child(4){
    margin-top: 40px;
    margin-right: 60px;
}

Comments

[Lynn «Кофеман»]

И не будет. У вас ни один тег p не является четвёртым ребёнком своего родителя.

Ну и класса fon-for-menu у вас нигде нет

Answer 1

[Владислав Черненко]

.list-items .item:nth-child(4) p {
    ...
}

Comments

[Rem36]

Спасибо!

Answer 2

[Adamos]

Щелкните правой кнопочкой по элементу - и браузер в выпавшем меню предложит посмотреть его код, а заодно - какие стили к нему реально применены и чем перекрыты.
Гораздо эффективнее, чем гадание на Тостере, тем более, что, скорее всего, здесь приведены далеко не все стили, реально присутствующие на сайте.

P.S. Здесь, впрочем, речь скорее о НЕ примененных стилях.
:nth-child(4) - это четвертый элемент внутри одного контейнера, а не четвертый из встретившихся на всей странице. Видимо, имелся в виду li.item:nth-child(4) ...

Comments

[Rem36]

не, я просто хотел тег подравнять у некоторых

Answer 3

[MisTFoR]

.item p{
    margin-top: 40px;
    margin-right: 60px;
}

.item .img-and-fon .fon-for-icon p{
    margin-top: 40px;
    margin-right: 60px;
}

.item .img-and-fon .fon-for-icon p{
    margin-top: 40px;
    margin-right: 60px;
}

li .img-and-fon .fon-for-icon p{
    margin-top: 40px;
    margin-right: 60px;
}

li.item .img-and-fon .fon-for-icon p{
    margin-top: 40px;
    margin-right: 60px;
}

Я заметил, что вы всем "p" задаете один и тот же стиль. Зачем?
Можно сделать так:

.list-items .item .fon-for-icon p{
    margin-top: 40px;
    margin-right: 60px;
}

Comments

[Rem36]

это я перечислил все свои варианты которые не сработали