How to style .doc-header individually?

[openbayou]

Hello,
Why is it that .doc-header, where the title of post, can't be style for individually? If I want to hide the title in .doc-header, it's hidden across all pages.

[akhrarovsaid]

Hey @openbayou,

Try adding this to your custom.scss located in your (payload) folder:

div.doc-header:has(+ .collection-edit--posts) {
  display: none;
}

[openbayou]

.doc-header is outside ..collection-edit--posts

[akhrarovsaid]

Didn't work.

.doc-header is outside ..collection-edit--posts

@openbayou I have it open as we speak to a collection with slug posts. I have the above custom scss applied. It works on my end. Are you sure you're putting it into app/(payload)/custom.scss? Whether or not the header is outside collection-edit is kind of irrelevant, that is what the :has(+ ...) is for anyway. Double check on your end please.

The only reason I can see why this wouldn't work for you is if you are developing somewhere that :has is not supported (like IE11).

If you want it to only target the h1 (as I have in the image above) then do this:

div.doc-header:has(+ .collection-edit--posts) > h1 {
  display: none;
}

[openbayou]

hmmm.

So I went ahead and did a new installation and tried it on the users collection div.doc-header:has(+ .collection-edit--users) { display: none; } and it worked.

¯_(ツ)_/¯

It's possible I put it in the wrong spot or my installation was refusing to work but I got it working now. Thanks for the help.

[akhrarovsaid]

My pleasure- glad we figured it out in the end!