Using CSS selectors to hide everything but first UL and H3 - html

Question

I am using CSS selectors to try to hide everything in my .text-wrap div except for the first UL and the first H3, however the selectors I have below are not working as expected.
CSS:
.text-wrap {
>*:not(h3:first-of-type):not(ul:first-of-type) {
display: none;
}
}
HTML:
<div class="text-wrap>
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>

Answer 1

As stated by the specification, the :not() pseudo class currently only accepts simple selectors:
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
This means that :not(h3:first-of-type) currently doesn't work since h3:first-of-type is not a simple selector.
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
To work around this, you can break up your selector and hide all the elements except the first of each type and then use a separate selector to hide everything except h3/ul elements:
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>
Alternatively, in your case, it seems like the easiest solution is to select all the sibling elements after the first ul element using the general sibling combinator, ~:
.text-wrap > ul:first-of-type ~ * {
display: none;
}
.text-wrap > ul:first-of-type ~ * {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>

Answer 2

You can do this with the css adjacent selector:
/* hide the elements */
.text-wrap p,
.text-wrap ul {
display: none;
}
/* show the element after the h3 */
.text-wrap h3 + ul {
display: initial;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>