CSS to display contents of one element in chrome using F12 developer tools

Question

So just not to get distracted by all the junk around the main content, in chrome F12 edeveloper tools I add these 2 styles:

.content {
  display: block !important;
}

body  {
  display: none;
}

But then everything disappears! the similar thing works with visibility: (but the content gets strained in between invisible elements)

 .content * {
  visibility: visible;
}
body * {
  visibility: hidden;
}

Please note content is changes from site to site depending on what the author of site has decided to call it's main content class, if you can use F12 developer tools with any site using the display none and all similar to above code please let me know what the syntax should be.

Also, is there a way to execute some javascript in Chrome F12 Debug Console to achieve similar result?

Answer 1

Using visibility: hidden; and visibility: visible; should work just fine.

Maybe you should apply it to body and .content directly and not all their children.

body {
  visibility: hidden;
}
.content {
  visibility: visible;
}

You can test this right here on Stack Overflow. But content is an targeted by and ID here (#content)

Answer 2

The problem is that content is a child of body so even though you are setting content to be display: block or visibility: visible . the parent element (BODY) is hidden. Therefore all of its children will be hidden too.