Как выделить элемент не содержащий дочерних?

Question

[prodavec macdonalds]

нужно присвоить тексту паддинг, но при этим изображения не затронуть, как достигнуть этого другими способами я знаю, было бы интересно знать метод на чистом css

<p>lorem ipsum dolor sit amet.</p>
<p>lorem ipsum dolor sit amet.</p>
<p><img class="size-medium" src="http://lorem.ipsum/lorem-ipsum.jpg" "></p>

Comments

[Андрей Верх]

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

[prodavec macdonalds]

Андрей Верх: не прокатит в случае если

<p>lorem ipsum dolor sit amet.</p>
<p>lorem ipsum dolor sit amet.</p>
<p>
<img class="size-medium" src="http://lorem.ipsum/lorem-ipsum.1jpg" ">
<img class="size-medium" src="http://lorem.ipsum/lorem-ipsum2.jpg" ">
<img class="size-medium" src="http://lorem.ipsum/lorem-ipsum3.jpg" ">
<img class="size-medium" src="http://lorem.ipsum/lorem-ipsum4.jpg" ">
</p>

[Андрей Верх]

Почему? Сдвинуться ведь все картинки.

Вообще, есть селектор :has только он нигде не работает, похоже. Так что только костыли придумывать.
Как ниже заметили, нужно класс задать...

[prodavec macdonalds]

начнут налазить друг на друга, паддинг то со всех сторон

[Exploding]

Андрей Верх: :has это jq селектор, в чистом css его нет...

[Exploding]

prodavec macdonalds: ну так padding-left можно сделать, или padding: 0 0 0 -10px; например

Answer 1

[Exploding]

А так не?
p:not(p img){
....
}

Comments

[Артём Лучников]

Внутри :not нельзя использовать вложенные селекторы.

[Exploding]

Артём Лучников: а, я с телефона не проверял... А если внутри нот просто имг оставить без п

[prodavec macdonalds]

Exploding: значит, что все кроме , нороче, нот для атрибутов и классов и не для вложенности

[Exploding]

prodavec macdonalds: ну а нельзя для P присвоить клас? И тогда исключающим и выбрать все? Как ниже там?

[prodavec macdonalds]

Exploding: в данный момент страницу формирует движок, js-ом вопрос я давно уже решил, но интересен способ на чистом css

[Exploding]

в общем походу или js или вторую инструкцию со сдвигом картинки влево...

[prodavec macdonalds]

Exploding: изображения двигать нельзя, в абзаце их может как одна так и более

[Exploding]

prodavec macdonalds: ну так как одна так и все сдвинутся... Или там более сложные варианты могут быть?

[Exploding]

prodavec macdonalds: ну а класс то для Р можно присвоить? Или что ж там за вакханалия такая?))))

[prodavec macdonalds]

Exploding: в две три строки

Answer 2

[Артём Лучников]

Добавить всем p, содержащим img, класс

<p>lorem ipsum dolor sit amet.</p>
<p>lorem ipsum dolor sit amet.</p>
<p class="image"><img src="http://via.placeholder.com/350x150"></p>

и написать что то типа

p:not(.image) {
  border: 1px solid red;
  padding: 20px 10px;
}

Пример

Comments

[Exploding]

Зачем класс присваивать если можно просто img написать

[Артём Лучников]

Exploding: приведите пример )

[Exploding]

А, блин сори, не внимательно посмотрел. Показалось, что вы .image картинке присвоили...

Answer 3

[Олег]

CSS ничего не ПРИСВАЕВАЕТ!
Нужен JS + регулярка в твоем случае.

Comments

[prodavec macdonalds]

как я уже говорил, я знаю что можно решить средствами js, хотелось бы знать иной способ

CSS ничего не ПРИСВАЕВАЕТ!

если я скажу иначе, нужно описать паддинг тексту абзаца, станет яснее?

[Exploding]

Присваивает:) Через псевдокласс в инструкции content. Можно даже в качестве данных использовать значения другого параметра элемента: attr('data-title'); например так.
Но это отступление...

[Exploding]

Если уж js, то можно и без регулярки. Jq :has() использовать...