Kevin Powell - CommunityKP-C
Kevin Powell - Community•16mo ago•
13 replies
Tim Rinkel

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>


[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!
Was this page helpful?