13 replies

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

Should I be able to use a CSS selector like

[data-progress="pending"]:first-of-type

[data-progress="pending"]:first-of-type

?

Background: I have a series of elements, each with a

[data-progress='pending'|'done']

[data-progress='pending'|'done']

attribute. All elements start as

pending

pending

and change to

done

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

pending

state I want to give a white background. When that one changes to

done

done

it would turn green and the next element would turn white. The result I'm getting is as if

:first-of-type

:first-of-type

only recognizes the

[data-progress]

[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

:first-of-type

work with data attribute values like this?

Thanks!

KP-C

Kevin Powell - Community•2y 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

[data-progress="pending"]:first-of-type

?

Background: I have a series of elements, each with a

[data-progress='pending'|'done']

[data-progress='pending'|'done']

attribute. All elements start as

pending

pending

and change to

done

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

pending

state I want to give a white background. When that one changes to

done

done

it would turn green and the next element would turn white. The result I'm getting is as if

:first-of-type

:first-of-type

only recognizes the

[data-progress]

[data-progress]

<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

:first-of-type

work with data attribute values like this?

Thanks!

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads