Not every sibling is the same

In the video, you got to know the adjacent and general sibling combinator (+ and ~).

The following HTML code contains two headings followed by some code and span tags:

<html> 
<body> 
  <h2 class = 'first'>First example:</h2>
  <code>some = code(2)</code>
  <span>will compile to...</span>
  <code>some = more_code()</code>
  <h2 class = 'second'>Second example:</h2>
  <code>another = code(3)</code>
  <span>will compile to...</span>
  <code>another = more_code()</code>
</body> 
</html>

Note that the two code examples here are not hierarchically organized. The only obvious difference is the class of the h2 element that precedes each example.

This HTML chunk has been read in for you and is available in the code_html variable.

1
- Select the first code tag after the second example's h2.
- For this, use html_elements() with the correct sibling combinator.
2
- Now select all code elements that come after the second example's h2.
- This time, use another type of sibling combinator.

Exercise

Not every sibling is the same

Instructions 1/2