CSS parent selector not working as expected - html

Question

Given the following HTML
<div id="field-filter-TIPO" class="css-1hqm095 container">
<svg
aria-hidden="true"
role="img"
class="octicon octicon-x-circle-fill css-djuh4e"
viewBox="0 0 12 12"
width="12"
height="12"
fill="currentColor"
style="
display: inline-block;
user-select: none;
vertical-align: text-bottom;
overflow: visible;
"
>
<path
fill-rule="evenodd"
d="M1.757 10.243a6 6 0 118.486-8.486 6 6 0 01-8.486 8.486zM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763l-2 2z"
></path>
</svg>
<div style="font-size: 16px; width: auto" class="css-1bmhiq9">
<svg viewBox="25 25 50 50" width="1em" height="1em" class="css-1bez47e">
<circle
cx="50"
cy="50"
r="22"
fill="none"
stroke="currentColor"
stroke-width="6"
stroke-miterlimit="10"
class="css-frwtbx"
></circle>
</svg>
</div>
<div
title="ColumnFilter"
kind="ColumnFilter"
id="columnfilter--fetching"
name="Fetching"
class="css-utvy5"
>
<button class="css-m8wrzs">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
font-size="16"
class="css-1cx02qk"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 3H5a1 1 0 0 0-1 1v2.59c0 .523.213 1.037.583 1.407L10 13.414V21a1.001 1.001 0 0 0 1.447.895l4-2c.339-.17.553-.516.553-.895v-5.586l5.417-5.417c.37-.37.583-.884.583-1.407V4a1 1 0 0 0-1-1zm-6.707 9.293A.996.996 0 0 0 14 13v5.382l-2 1V13a.996.996 0 0 0-.293-.707L6 6.59V5h14.001l.002 1.583-5.71 5.71z"
></path>
</svg>
</button>
</div>
</div>
why this selector
.container div > svg {
margin-right: -8px;
}
is not affecting the first svg (the X icon)?
Should't the selector pick all the svg whose parent is a div inside the elements with the .container class? My goal is to create a selector to apply to the X icon (svg) and the second svg (the circle icon).
jsfiddle

Answer 1

Should't the selector pick all the svg whose parent is a div inside the elements with the .container class? My goal is to create a selector to apply to the X icon (svg) and the second svg (the circle icon).
Well the first svg is not inside div... it's in a container... try adding it ina div and check

Answer 2

For now, there is no parent selector in CSS (only child selector). However, you can use the JS property .parentNode