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

so not distracted junk around main content, in chrome f12 edeveloper tools add these 2 styles:

.content {   display: block !important; }  body  {   display: none; } 

but disappears! similar thing works visibility: (but content gets strained in between invisible elements)

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

please note contentis changes site site depending on author of site has decided call it's main content class, if can use f12 developer tools site using display none , similar above code please let me know syntax should be.

also, there way execute javascript in chrome f12 debug console achieve similar result?

using visibility: hidden; , visibility: visible; should work fine.

maybe should apply body , .content directly , not children.

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

you can test right here on stack overflow. content targeted , id here (#content)