Search code examples
csscss-selectorssummary

pseudo element nesting css doesnt apply using `&` for ::marker under <details> but <summary>

trying CSS nesting feature with pseudo element ::marker but found it strange that this nesting does not work

 details {
      padding: 4px;
      & summary {
        color: red;
        & ::marker {
          color: green;
        }
      }
 }

while this works


details {
      padding: 4px;
      & summary {
        color: red;   
      }
      &::marker {
          color: green;
        }
 }

below is my code snippet to run

details.default{
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;

  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
  }

  &::marker {
    color: green
  }

}


details.other {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;

  & summary {
   color: red;
    font-size: large;
    cursor: pointer;
    
    &::marker {
      color: green;
    }
  }

}
<details class="default">
  <summary>default question</summary>
  <p>default answer</p>
</details>

<details class="other">
  <summary>other question</summary>
  <p>other answer</p>
</details>

so does ::marker is a part of <summary> or <details> here? while in inspect Element it show under

::marker element in chrome dev tool

Solution

  • On my Edge/Windows10 this snippet makes both markers (the arrows) green.

    Note the spaces are important. We need one when the marker is being formatted separate from the summary and we don't have one when it is being formatted as part of the summary in the nesting.

    details.default {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;
  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
  }
  & ::marker {
    color: green
  }
}

details.other {
  padding: 4px;
  background-color: aliceblue;
  border-left: 1rem solid #f16db9;
  & summary {
    color: red;
    font-size: large;
    cursor: pointer;
    &::marker {
      color: green;
    }
  }
}
    <details class="default">
  <summary>default question</summary>
  <p>default answer</p>
</details>

<details class="other">
  <summary>other question</summary>
  <p>other answer</p>
</details>

    Also tested on FF and Chrome on Windows10 and in both cases the arrows are green.

    On Safari (IOS17...) the arrows are red altho' caniuse says marker is OK. Is it the nesting that is the problem?