How to visually hide stuff but keep it browser-searchable

dabblet.css

/**
 * How to visually hide stuff but keep it browser-searchable
 */

body > div:nth-of-type(1) { display: none; }
body > div:nth-of-type(2) { visibility: hidden; }
body > div:nth-of-type(3) { height: 0; overflow: hidden; }
body > div:nth-of-type(4) { position: absolute; clip: rect(0,0,0,0) }
body > div:nth-of-type(5) { overflow: hidden; }
	body > div:nth-of-type(5) > div { height: 0; }
body > div:nth-of-type(6) { height: 1px; overflow: hidden; }
body > div:nth-of-type(7) { opacity: 0; }

dabblet.html

<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div><div>test5</div></div>
<div>test6</div>
<div>test7</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}