I am going through the HTML tutorial and I'm clueless here

I am learning html and came across a snipet of code that I haven’t seen before. I was hoping someone could explain it. In particular:

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

I don’t understand what the class .all-browsers > mean when there is an angular bracket before h1, and .browser. The full code is below.

<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>

So what does the > mean when between two classes declarations?

It means that you want to select all h1 whose parent element has class all-browsers

Is there another way to write this code to get the same results?

If you change the html…sure.

For eg, you can give these specific elements their own class.