Hiding Metadata via CSS (7.1)

Hey! Using this great resource from @tuanphan I have been able to figure out some simple CSS customizations, including hiding the pagination on blog posts using the code below.

.item-pagination {
  display:none !important; 
}

I thought I can replace .item-pagination with time.dt-published.blog-meta-item.blog-meta-item–date and .blog-meta-item.blog-meta-item–author.p-author.author to remove the Date and Author metadata respectively (location of which is outlined in the attached screenshot) but it doesn't seem to be working. It's worked flawlessly swapping out other class names but it's not working for these for some reasons.

I know there is a toggle in the editor to remove these but that removes the metadata across the whole site, not just the blog that post is within (which is stupid that the settings don't just apply to that blog). I know how to correctly inject the code so it only applies to the pages I want, but I can't even get it to work in the sitewide Design>Custom CSS. The site is not published yet so I can't share the link but this should be easy to replicate on any site to test. You don't even have to save the Custom CSS to see the result.

Does anyone have insight into what would need to be edited to the code above to get this to work? Is there any way to set it to have a higher priority than the toggle in the editor since it may be correct but just overrun by the built in settings? Could those classes be incorrect?

Thanks!

After struggling with this for days I stumbled upon this post about removing "written by" in the author metadata which I think has given me the answer. Instead of display:none; I used visibility: hidden; which seemed to do the trick.

After I got the format right I still couldn't hide the date. Inspecting the page I found that Class ID is actually .dt-published.blog-meta-item.blog-meta-item--date, not what I listed above.

Hope this helps anyone out there in a similar situation.