Tim Rinkel Posts - Answer Overflow

Tim Rinkel

•Created by Tim Rinkel on 10/6/2024 in #front-end

Using `:first-of-type` with data attribute values?

Should I be able to use a CSS selector like [data-progress="pending"]:first-of-type? Background: I have a series of elements, each with a [data-progress='pending'|'done'] attribute. All elements start as pending and change to done when they finish (they complete in order). I want to set a darker background color for all of them to start. The first with a pending state I want to give a white background. When that one changes to done it would turn green and the next element would turn white. The result I'm getting is as if :first-of-type only recognizes the [data-progress] attribute itself and not the value. Is this the way it works or do I need to be looking for a bug in my code somewhere. I've Googled and MDN'ed and haven't been able to find an answer. Code Example: This is a simplified example of what I'm doing:

<div id="first" data-progress="pending">...</div>
<div id="second" data-progress="pending">...</div>
<div id="third" data-progress="pending">...</div>
<div id="fourth" data-progress="pending">...</div>

<div id="first" data-progress="pending">...</div>
<div id="second" data-progress="pending">...</div>
<div id="third" data-progress="pending">...</div>
<div id="fourth" data-progress="pending">...</div>

[data-progress=“pending”] {
    background-color: gray;
}

[data-progress=“done”] {
    background-color: green;
}

[data-progress="pending"]:first-of-type {
    background-color: white;
}

[data-progress=“pending”] {
    background-color: gray;
}

[data-progress=“done”] {
    background-color: green;
}

[data-progress="pending"]:first-of-type {
    background-color: white;
}

So, the question is, should :first-of-type work with data attribute values like this? Thanks!

14 replies

KPCKevin Powell - Community

•Created by Tim Rinkel on 1/13/2023 in #front-end

Using CSS custom property in inline SVG

I'm trying to replace a single character on a website with an inline SVG. I'm basing what I'm doing on Kevin's video "Basic, Intermediate & Pro animated hamburger icons". The main difference at this point is I'm doing it in a pseudo element:

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

I have the SVG working finally, but I can't get the custom property to apply. If I replace it with an actual color, it works. Is this just not possible as part of the content of a pseudo element or am I doing something wrong? I'm hoping for the latter.

15 replies

Gaming

Programming