Discussion
Loading...

Discussion

  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Manuel Matuzović
@matuzo@front-end.social  ·  activity timestamp 2 weeks ago

I like container style queries, but what I really want to do many times is query an element.

```
button { background: var(--bg, green); }

.btn-error { --btn-style: error }

@element style(--btn-style: error) {
$element { --bg: red; }
}
```

Will something like that ever be possible, @bramus

  • Copy link
  • Flag this post
  • Block
Mia (web luddite)
@mia@front-end.social replied  ·  activity timestamp 2 weeks ago

@matuzo @bramus Container queries do query an element already. But it looks like you're trying two things:

1. select all elements that have a style
2. style *the same element* that you queried/selected

I don't think we'll ever be able to do 1, because selecting an element based on it's own styles is the definition of an infinite loop.

But 2 is already how the if() function works. I guess @kizu already showed how you could put that in a universal selector.

  • Copy link
  • Flag this comment
  • Block
Roma Komarov
@kizu@front-end.social replied  ·  activity timestamp 2 weeks ago

@matuzo @bramus `if()` works like that, so in your case it could be

```CSS
* {
--bg: if(style(--btn-style: error): red);
}
```

It won't work if you'd have something like

```CSS
button {
--bg: green;
background: var(--bg);
}
```

for obvious specificity reasons, and if we would do `*:not( #a#b)` to bump it, it will override the `--bg`, _but_ we could do

```CSS
*:not( #a#b) {
--bg: if(
style(--btn-style: error): red;
else: revert-rule;
);
}
```

And this will work.

  • Copy link
  • Flag this comment
  • Block
Log in

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.1-alpha.8 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct
Home
Login