Re: [csswg-drafts] [css-values-5] What is the MVP for inline conditionals on custom properties? (#10064)

• From: Brandon McConnell via GitHub <sysbot+gh@w3.org>
• Date: Sat, 22 Jun 2024 18:13:18 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2184136405-1719079996-sysbot+gh@w3.org>

@LeaVerou Is there already a CSS function in existence or in the works that could be used to check whether or not the matched element matches a specified selector, essentially selector narrowing?

For example…

<table>
    <thead>
        <tr>
            <th>BEFORE</th>
            <th>AFTER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
<td valign="top">

```css
/* without using if() */
.item {
  --symbol: "🩶";
  &::before {
    content: var(--symbol);
  }
  &.favorite {
    --symbol: "🧡";
  }
}
```

</td>
<td valign="top">

```css
/* using if() */
.item {
  --symbol: if(matches(.favorite) ? "🧡" : "🩶");
  &::before {
    content: var(--symbol);
  }
}
```

</td>
        </tr>
    </tbody>
</table>

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10064#issuecomment-2184136405 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 22 June 2024 18:13:19 UTC