Как правильно добавить padding одному из ul?

Question

[dhat]

В .div-1 у меня находятся 3 элемента: h3 и два ul. Эти два ul мне нужно поставить в ряд (я это сделал с помощью float: left), при этом как видите они некрасиво друг на друга налезают. Как мне добавить паддинг только ко второму ul? Мне не нужен паддинг к первому ul, потому что это нарушает дизайн. Тут можно использовать псевдоселектор :last-child по отношению к .div-1? Или в данном случае они не работают? Насколько я понимаю присвоение класса для нужного ul в моем случае это плохая практика? Как тогда поступить?

Были мысли загнать оба ul к контейнер и там центрировать.

codepen.io/dhatt/pen/LkwxLq?editors=1100#

Answer 1

[Андрей Федоров]

А почему просто не добавить:

.footer ul {
  margin-right: 1em;
}

Можно конечно и как вы хотите:

.footer ul:last-child {
  padding-left: 1em;
}

Но самым правильным подходом было бы

.footer ul:not(:last-child) {
  margin-right: 1em;
}

Comments

[dhat]

Потому что мне не нужен этот паддинг для первого списка!

[Андрей Федоров]

dhat: Хорошо, добавил варианты

[dhat]

В оригинале кода у меня в .footer есть ДРУГИЕ .div я их сюда не писал чтоб не была куча кода. Мне нужно ВНУТРИ .div-1

[dhat]

.div-1:last-child {
padding-left: 20px;
}

Не работает!

[dhat]

Прошу прощения, работает, я забыл про ul! Пометил вас как решение, спасибо!

Answer 2

[Алексей Ярков]

codepen.io/anon/pen/zBgNEL?editors=1100#

.div-1 > ul + ul{
  padding-left: 100px;
}

Comments

[dhat]

Ваше решение работает, только я его не понимаю. Как вы пишите эти селекторы??? Почему у меня не сработали last child и nth child?

[Dnebl]

dhat: everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize

Answer 3

[Dnebl]

htmlbook.ru/css/nth-child
пример
codepen.io/anon/pen/ZOgLax

Comments

[dhat]

Ок, только почему-то не работает!

.div-1:nth-child(3) {
padding-left: 20px;
}

[Dnebl]

dhat: .div-1 ul:nth-child(3)

[Dnebl]

dhat: только 2 а не 3

[dhat]

Спасибо разобрался.