scoped css [data="xyz"] is applied to wrong element

[Fuzzyma]

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ul1rGzEQ/CsbvdiB+Jy0pSnXi+kHgbYPbWkLfREURVrfKdFJQtI5V4z/e1Y6O8mDCRyHNDPanR1pyz56X20GZDVrogzaJ4iYBr/iVvfehQRbCLiGHayD62FG0hm33EpnY4I+tnCV+fnsCxrj4K8LRp3MTrltllM5KkSbhL03IiHtABqlNyCNiPGKs7VznBV4IlbNMv+Lbr9qls+O0zam/wYhSudREVJRCSBlbVO3kJ02an5xCttc4UbIuza4waqFdMaFmryq95m51yp1NVycn/uxAB3qtktPyC63+tCj0oJaBUQLwiqY92Jc7A9fvn3nx32nPNJxD8dc3JgB4WQKWNhUDFBD+ii2PN2KnbFEE9q1bqvb6CzdT6nGmXS91wbDD580XQJn9aEPZ4Lu4P5bwVIY8OyAyw7l3RH8No4Z4+xnwIhhg5w9ckmEFtNEX//+jiOtH8neqcGQ+gXyF0Znhuxxkn2i+cn2M11x+7WEoG37J16PCW08DJWNllyKnjN6eZ9fGP3J7uvqzSFPSvHfBkOuSQESUb26ZLsHd2L7Fw==

Steps to reproduce

Open the webpage. Make the media query apply by adjusting the viewport of the preview

What is expected?

The small square div should be blue

What is actually happening?

The parent div AND the child turns blue

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 6850HS with Radeon Graphics
    Memory: 11.37 GB / 15.28 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.8.1 - ~/.nvm/versions/node/v19.8.1/bin/node
    Yarn: 3.2.2 - ~/.nvm/versions/node/v19.8.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v19.8.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.90

Any additional comments?

I run into this bug because I wanted to hide every second column in a table via media query.
For some reason the [data="foo"] attribute was applied to the td instead of the leading .table which made the media query malfunction.
So this example is not an exact reproduction of my bug but I think we can agree that its probably the same cause.

[dten]

scoped styles work by requiring the final matcher also matching being from the component

so your can see in your link the compiled css looks as follows

and since your inner div is a div which is the first child within a div then it matches. in this case the outer div is waaay above your component. but this is how it works

.foo div[data-v-7ba5bd90]:nth-child(1) {
  background-color: red;
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 768px) {
div div[data-v-7ba5bd90]:nth-child(1) {
    background-color: blue !important;
}
}

[Fuzzyma]

thanks for the explanation. Powerful but sometimes unexpected!