Kevin Powell - Community•3w ago

Style an element if it has 2 attributes with the same value?

I have a tricky one. In the first screenshot, it shows the Qty numeric inputs with custom "spin up" and "spin down" buttons. One is enabled, and the other disabled. We are using a 3rd party library to do this, and my stylesheet targets showing the disabled (-) and (+) icons by checking to see if the container has an input[readonly]

&.e-disabled .e-input-group-icon.e-spin-down::before,
  &:has(input[readonly]) .e-input-group-icon.e-spin-down::before {
    content: var(--svg-decrement-disabled);
  }
  

  &.e-disabled .e-input-group-icon.e-spin-up::before,
  &:has(input[readonly]) .e-input-group-icon.e-spin-up::before {
    content: var(--svg-increment-disabled);
  }

&.e-disabled .e-input-group-icon.e-spin-down::before,
  &:has(input[readonly]) .e-input-group-icon.e-spin-down::before {
    content: var(--svg-decrement-disabled);
  }
  

  &.e-disabled .e-input-group-icon.e-spin-up::before,
  &:has(input[readonly]) .e-input-group-icon.e-spin-up::before {
    content: var(--svg-increment-disabled);
  }

Well my UI/UX designer just said, we need to disable the "increment" or "decrement" buttons as we approach the control's min and max limit. I'm already doing crazy terinary operands and such in my markup to set these limits and would really rather not write a logic-derived class to add and remove to disable just one of the icons or not.

<SfNumericTextBox
    @bind-Value="Group.Quantity"
    Enabled="Group.SelectedServiceAction is not null && Group.ServiceDate is not null"
    FloatLabelType="FloatLabelType.Auto"
    Placeholder="@Resources.FormFieldPlaceholderText_Quantity"
    CssClass="@UI.GetClassForOcInput("oc-spin-counter", Enums.ComponentSize.Xs)"
    ShowSpinButton
    Min="0"
    Max="Group.SelectedServiceAction == ServiceActionType.Removal
        ? Group.Assets.Count(asset => asset.PendingRemovalDate is null) 
        : int.MaxValue" 
    HtmlAttributes="@UI.GetSfTestId($"group-{SelfIndex}-quantity")"
    OnChange="Quantity_OnChange"
    Readonly="_showNoAssetsDateValidationError"
/>

<SfNumericTextBox
    @bind-Value="Group.Quantity"
    Enabled="Group.SelectedServiceAction is not null && Group.ServiceDate is not null"
    FloatLabelType="FloatLabelType.Auto"
    Placeholder="@Resources.FormFieldPlaceholderText_Quantity"
    CssClass="@UI.GetClassForOcInput("oc-spin-counter", Enums.ComponentSize.Xs)"
    ShowSpinButton
    Min="0"
    Max="Group.SelectedServiceAction == ServiceActionType.Removal
        ? Group.Assets.Count(asset => asset.PendingRemovalDate is null) 
        : int.MaxValue" 
    HtmlAttributes="@UI.GetSfTestId($"group-{SelfIndex}-quantity")"
    OnChange="Quantity_OnChange"
    Readonly="_showNoAssetsDateValidationError"
/>

12 Replies

Rowe2ryOP•3w ago

Now, looking at the devtools, it appears as though the 3rd party UI library is appending some pretty useful ARIA attributes I could tap into. Namely the ones aria-valuemax and aria-valuenow So my question: How do I target this element when these 2 attributes have the same value? Is it possible I essentially need

.oc-spin-counter input[aria-valuemax="x"][aria-value-now="x"] {
}

.oc-spin-counter input[aria-valuemax="x"][aria-value-now="x"] {
}

Where "if x == x"

Rowe2ryOP•3w ago

I guess I could manually write a selector like

.oc-spin-counter input[aria-valuemax="1"][aria-valuenow="1"],
.oc-spin-counter input[aria-valuemax="2"][aria-valuenow="2"],
.oc-spin-counter input[aria-valuemax="3"][aria-valuenow="3"],
.oc-spin-counter input[aria-valuemax="4"][aria-valuenow="4"],
.oc-spin-counter input[aria-valuemax="5"][aria-valuenow="5"],

.oc-spin-counter input[aria-valuemax="1"][aria-valuenow="1"],
.oc-spin-counter input[aria-valuemax="2"][aria-valuenow="2"],
.oc-spin-counter input[aria-valuemax="3"][aria-valuenow="3"],
.oc-spin-counter input[aria-valuemax="4"][aria-valuenow="4"],
.oc-spin-counter input[aria-valuemax="5"][aria-valuenow="5"],

and cover the use case for like up to 20, but ideally this would be for all situations where the 2 have identical values

Chris Bolson•3w ago

As you say, this doesn't seem possible in CSS alone. I am not sure what language it is that you are using but you could do this relatively simply with JavaScript, something like this:

document.querySelectorAll('[data-valuemax][data-valuenow]').forEach(element => {
    if (element.dataset.valuemax === element.dataset.valuenow) {
        element.classList.add('matching');
    }
});

document.querySelectorAll('[data-valuemax][data-valuenow]').forEach(element => {
    if (element.dataset.valuemax === element.dataset.valuenow) {
        element.classList.add('matching');
    }
});

ἔρως•3w ago

you can generate this with sass instead

ἔρως•3w ago

https://jsfiddle.net/Lvkst8w2/

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

ἔρως•3w ago

try changing data-val

Rowe2ryOP•3w ago

Yeah we're using Blazor (C# web assembly) which doesn't make for super nice access to Javascript. (its possible through interop, but introduces a lot of overhead) I think I am just going to push back that this is do-able but likely not a good use of time when we have other new development on the docket and this is just polishing touches on a feature we've been building for the past 12 weeks due to ship this Monday

ἔρως•3w ago

i tried to use the result in container queries but it didnt work, for some reason...

Rowe2ryOP•3w ago

That's pretty cool. I am not good at reading the scss

ἔρως•3w ago

the scss bit is to generate the attribute selectors from -100 to 100 the rest, after @for, is just pure css the important is the clamp

Rowe2ryOP•3w ago

Ahh I'm starting to see it. Thats an innovative approach. I think I might just bite the bullet and use our Blazor framwork tooling to assign an "increment-disabled" and/or "decrement-disabled" class if I don't get approval to ignore this requirement

ἔρως•3w ago

that is the best option

Gaming

Programming

Style an element if it has 2 attributes with the same value?