Does not work on some cases.

[satyanath]

I find that the script does not work for some cases. I am enclosing a file which shows where it works for one case in Google Chrome and does not work for the other. In the example there are 2 divs within a main div. The first div background color is changed using an element query with a CSS class. The second one is styled using an element query where the id is used for the css. It works for the second case and not for the first.
test.zip

[Tommy Hodgins]

Hi @satyanath! Thanks for checking out EQCSS, I've had a look at the HTML file in your zip and as long as the link to the EQCSS plugin is working (and the one element is showing up pink) everything is working correctly.

The reason the rule for .tdiv doesn't result in a change in colour in this query:

@element "#maindiv" and (min-width: 400px) {
  .tdiv {
    background-color: pink;
  }
}

Is because when it does apply, the .tdiv selector written for the class of the element is weaker in CSS than the selector written for the ID that says #testdiv. Because of this, even a rule in regular CSS written for .tdiv { background-color: pink; } wouldn't result in the background being changed.

To resolve this issue with the specificity of your selectors, you could write the styles originally for #testdiv as being for .tdiv and then the @element query will apply. You could also update the selector in the element query from .tdiv to #testdiv and it would apply as well.

If for some reason you needed to use the ID to select it in one place and had to use a class to select it in another place, another way you could fix this kind of issue would be by selecting the elements using an attribute selector, like [id=testdiv] or [class=tdiv]. If the selectors are written using attribute selectors like that they will be of equal specificity, meaning whichever style is read later will override the previous style at the same level of specificity.

Does this help explain what's going on here? Everything in your demo is working and correct, you have a minor conflict in how strong the CSS selectors are, so if you switch those around everything else in the demo is working already :D

[satyanath]

Thanks for explaining the reason why the code with .tdiv selector was not working. That gives some insight into why things were not working. I am sorry it is my mistake.

Also I want to understand one more point though a little unrelated to this bug. The selector in the top line (i.e. next to @element) needs to be in quotes, while the ones in CSS inside the element query should not be. This leads to confusion and non-uniformity. Can this be made more uniform?

[Tommy Hodgins]

Hi @satyanath :D No worries, I was glad I could help you solve the issue!

A lot of people have commented that they wish they could write EQCSS without wrapping the scoped selectors in quotes! I even have an unreleased build of EQCSS I am testing that allows this: http://staticresource.com/eqcss/EQCSS.js

And the test page is here, see the tests at the bottom for unquoted selectors and selector lists: http://staticresource.com/eqcss-testing.html

The only downside to this, and the reason I haven't released and update to EQCSS that includes this yet is some people have told me that allowing the selector list unquoted introduces ambiguity, that if a query was written like:

@element 'div, span' and (min-width: 500px) {}

And it was possible to write it like:

@element div, span and (min-width: 500px) {}

That it seems like the query applies to:

• div
• span and (min-width: 500px)

Instead of both the div and the span when (min-width: 500px).

What do you think about this? I suppose there's no harm in relaxing it so that it works both ways (with and without quotes) allowing the author of the styles to pick the way that looks best to them.

What do you think - is this something we should release?

If you have any EQCSS or CSS questions feel free to hop into our chat room at https://gitter.im/eqcss/eqcss any time as well! Everybody is welcome to join and ask anything!

[Tommy Hodgins]

The latest update, to version 1.5.1 makes it so the quotes around the selector list is no longer required :D