How to apply CSS style if the p element does not have a ul

Question

I want to apply the page-break-inside:avoid property to all p elements that do not have a ul element.

p {
    margin-top: 4pt !important;
    margin-bottom:6pt !important;
    page-break-inside:avoid;
    orphans: 4;
    widows: 2;
}

<p>Hello text </p>
   <p>hello <ul>
    <li>list </li>
   </ul>

I want to exclude the second paragraph. Is it possible through CSS? I am looking for a CSS solution.

No, it is not possible to exclude `p` elements with `ul` elements within them. — Heretic Monkey, Jan 08 '20 at 17:38
Semi irrelevant anyway since p tags can't contain ul tags. Invalid HTML Any decent browser would render that as `
...
...
...` — j08691, Jan 08 '20 at 17:39
Thanks. I use this mainly for print and no errors were shown. A good lesson. By the way, in general, I did search for an answer for many days. — Antony, Jan 09 '20 at 02:40

score 1 · Answer 1 · answered Jan 08 '20 at 17:41

You can't use the ul inside a p element. As for the identifier topic, the only option for this would be to use the :has pseudo class, but it's still not compatible.

You can check its documentation here.

Revise your code to improve the structure.

What you could do is something like this:

<p>First paragraph</p>
<p>Second paragraph</p>
<ul>
   <li>Element 1</li>
   <li>Element 2</li>
</ul>
<p>Third paragraph</p>
<p>Fourth paragraph</p>

This way if you want to affect a ul that's right after a p you could use this selector:

p ~ ul {
   color: red;
}
//Selects every <ul> element that are preceded by a <p> element

score 0 · Answer 2 · answered Jan 08 '20 at 17:45

0

Your code is not valid. p elements can only contain phrasing content https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element

answered Jan 08 '20 at 17:45

a.osadchiy

3
1

How to apply CSS style if the p element does not have a ul

2 Answers2