What does the operator ">" mean besides 'greater than'?

Question

I am asking this question with respect to the following examples of code:

const celciusInput = document.querySelector('#celcius > input');
const fahrenheitInput = document.querySelector('#fahrenheit > input');
const kelvinInput = document.querySelector('#kelvin > input');

Another example:

<input type="radio" name="rate" value="Very poor"> Very poor
<input type="radio" name="rate" value="Poor"> Poor
<input type="radio" name="rate" value="OK"> OK
<input type="radio" name="rate" value="Good"> Good
<input type="radio" name="rate" value="Very Good"> Very Good

I have a hunch that the ">" operator in this context would cause JavaScript to extract some sort of data based on the defined class/id/etc. However, I am not sure if there is a name for the ">" operator in this context and what does it do exactly?

Answer 1

Good question! Sometimes it's difficult to tell when one language begins and another ends. For example, in your snippet:

const kelvinInput = document.querySelector('#kelvin > input');

This portion is Javascript:

const kelvinInput = document.querySelector();

And this portion is actually a "selector" that uses the child syntax (the ">" means "child").

'#kelvin > input'

Selectors are most often found in CSS to target and style particular HTML elements. In contrast, in your snippet the selector is being used so that Javascript can interact with some HTML.

When put together the snippet is saying: Create a Javascript variable named kelvinInput that references an HTML input field that is the child of an HTML element that has the id "kelvin".

Here's a snippet of code that illustrates how it might be used in context:

function update(){
  
  const kelvinInput = document.querySelector('#kelvin > input');

  document.getElementById('kelvin-output').innerHTML = kelvinInput.value;
  
  
}

<div id="kelvin">
  Kelvin (type a number here): <input type="text" onkeyup="update()">
</div>

<div id="kelvin-output"></div>