You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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
.foodiv[data-v-7ba5bd90]:nth-child(1) {
background-color: red;
width:100px;
height:100px;
}
@media screen and (max-width:768px) {
divdiv[data-v-7ba5bd90]:nth-child(1) {
background-color: blue !important;
}
}
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
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 thetd
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.
The text was updated successfully, but these errors were encountered: