Is it possible to use CSS 3 Advanced element selection selectors in Atomizer?

[jitendravyas]

http://caniuse.com/#feat=css-sel3

[thierryk]

I believe :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :root, :empty, :target, :enabled, :disabled, and :checked are supported.

The general sibling (~) is not supported even though + and > combinators are (you may want to open an issue if you think it'd be good to include that in ACSS).

I'm not sure there is value to include attribute selectors à la [foo^="bar"] since Atomic CSS is about styling via markup and you're already "in the attribute" inside a template (where you can rely on JS for logic). Same for :last-child() and the like. Even if those are supported, relying on Atomic CSS for this could create a lot of redundancy as many nodes would need to include that type of class.

As I often say, using ACSS does not mean abandoning all "classic" approaches altogether. ACSS is no silver bullet, one should only use it for what it does best.

Anyway, I may be missing something. Do you have a particular use-case in mind?

[jitendravyas]

How will this be handled in the atomizer?

.block-list--saved-segments {
    height: 150px
    > li {
        &:hover:not(.no-hover):not(.selected) {
            background: #ccc;
        }
    }
}

[idmytro]

:not() is not supported See https://github.com/acss-io/atomizer/blob/master/src/lib/grammar.js#L6

[thierryk]

As @idmytro says, :not() is not supported.

Without much context it's difficult to say what other approach you could try. You could replace the :not():not() "logic" with a class meant to trigger the hover effect, for example:

.block-list--saved-segments > li.thisClassAllowsBackgroundChangeOnHover:hover {
  background: #ccc;
}

With ACSS, you'd replicate that approach by using Bgc(#ccc):h where needed (on nodes that don't have the .no-hover or .selected classes).

Or you could simply prevent .no-hover and .selected from getting that styling by using !important in a separate rule, for example:

.block-list--saved-segments > li:hover {
  background: #ccc;
}
.block-list--saved-segments > li.no-hover,
.block-list--saved-segments > li.selected {
  background: transparent!important; /* or whatever it should be */
}

In the above case, you would use ACSS by mixing the 2, Bgc(#ccc):h on all nodes and Bgc(t)!:h on the ones that are not supposed to change background colors (the ones on which you have .no-hover or .selected classes).

Does that make sense?