Given the following HTML

<div id="field-filter-TIPO" >
  <svg
    aria-hidden="true"
    role="img"
    
    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" >
    <svg viewBox="25 25 50 50" width="1em" height="1em" >
      <circle
        cx="50"
        cy="50"
        r="22"
        fill="none"
        stroke="currentColor"
        stroke-width="6"
        stroke-miterlimit="10"
        
      ></circle>
    </svg>
  </div>
  <div
    title="ColumnFilter"
    kind="ColumnFilter"
    id="columnfilter--fetching"
    name="Fetching"
    
  >
    <button >
      <svg
        stroke="currentColor"
        fill="currentColor"
        stroke-width="0"
        viewBox="0 0 24 24"
        font-size="16"
        
        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

CodePudding user response：

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

CodePudding user response：

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