I have a running header element:

.page-header {
  position: running(header);
  background-color: grey;
  display: flex;
  justify-content: space-between;
  .lhs-logo {
     height: 16px;
  }
  .rhs-info {
    color: blue;
  }
}

Which I've applied to all pages via:

@page {
	size: US-Letter portrait;
	margin: 52px 0 0;
	padding: 24px 32px;

	@top-center {
		content: element(header);
	}
}

But what I'm wondering is if there's any way to customize this header so as to hide the `.rhs-info` element when it appears on `@page:first`? I tried a few variations such as:

@page:first {
  .rhs-info { display: none; }
}

and:

.rhs-info {
  @page:first { display: none; }
}

but nothing like that worked. I suspect the CSS syntax doesn't really support any selectors other than the ones like `@top-center` and/or that the model here is that the running content is kind of just rubber stamped — but is there any direct way I can tweak running content on a page-by-page basis?

If not, I think the workaround would be to just bump my current `.page-header` element to the *second* page and provide on the first page its own `.page-header` that drops the unwanted HTML elements from that initial copy. This wouldn't be a huge problem for my implementation, just wondering if there's a more elegant way to do it in Prince with CSS only?

I think it is necessary to use two different elements as you described.