Custom radio button w3s example - css

Question

There is a custom radio buttons example at the w3schools.com:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio
I wonder, what's the reason to have separate .container .checkmark:after statement? Why these styles are not included directly to .checkmark:after statement?
Full code example:
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>

Answer 1

There's no real reason why this happens, I suppose w3schools has the following motives:
The first rule with .checkmark:after doesn't really give any markup other than setting the content, position and display. This is merely a preparation for styling, which can be applied to every checkbox on the website without consequences if other styling is being changed.
In this example, there's only one area that contains styled inputs, but in a large website multiple input fields might be available. It's not a problem to apply an invisible pseudo element (modern browsers don't fully render display: none on page load anyway), but you can control which inputs are actually styled this way.
It's a matter of semantics, separating the actual styling and logic.

Answer 2

In the above example you can just omit ".container" because the only radio buttons present are also enclosed within the container class label so the same CSS styling is applied.
But what if the case is, you want to have different styles applied and the radio buttons are not placed within the same container class?
If you make use of "input:checked ~ .checkmark:after" without mentioning in which container specifically it is present, the styling would be just applied to all the elements of the type input and not just the ones inside the container class.