more elaborate selectors

let hover_html = `<div>
  <a href="https://minesparis.psl.eu/" target="_">
    this is a link - hover mouse here
  </a>
  <br>
  <a name="minesparis">
    now this is an &lt;a&gt; 
    tag too but it does not react to hover
    since it is excluded from the CSS selector
  </a>
</div>`

let hover_css = `/* <a> elements under a .part2
   and that have both pseudo-classes */
a:hover:link {
    font-size: 200%;
    background-color: red;
    text-decoration: none;
}`

await tools.sample_from_strings({html: hover_html, css: hover_css}, {start_with: 'css'})

let rank_html = `<ul>
  <li>the first bullet</li>
  <li>the 2nd bullet</li>
  <li>the 3rd bullet</li>
  <li>the 4th bullet</li>
  <li>the 5th bullet</li>
  <li>the 6th bullet</li>
  <li>the 7th bullet</li>
  <li>the 8th bullet</li>
</ul>
`

let rank_css = `li:nth-child(2n+1) {
  background-color: #fee; /* pink-ish */
}
li:nth-child(3n) {
  background-color: #eef; /* blue-ish */
}
li {
    font-size: 200%;
}`

await tools.sample_from_strings({html: rank_html, css: rank_css}, {start_with: 'css'})

let under_html = `<div>
  <p>
    a <span> span </span> as the div's grandson
  </p>
  <span> this span is div's immediate son </span>
</div>
`

let under_css = `/* a <span> anywhere under <div> */
div span {
   color: red;
}

/* a <span> immediately under <div> */
div > span {
   color: green;
}
`

await tools.sample_from_strings({html: under_html, css: under_css}, {start_with: 'css'})

let sibling_html = `<section>
  <p>some header</p>
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</section>
`

let sibling_css = `
/* siblings have the same parent */

/* all <p> immediately after a <h1> */
h1 + p {
  color: red;
}

/* all <p> somewhere after a <h1> */
h1 ~ p {
  background-color: #ccc;
}
`

await tools.sample_from_strings({html: sibling_html, css: sibling_css}, {start_with: 'css', id: 'siblings'})