Select first element with data attribute

Question

I want to select the very first match of a paragraph <p> containing the attribute data-result="INVALID" using css.

I have tried this little script without any success. No element gets selected.

I am limited to only css for this solution (No jQuery). Is there any solution for this problem ?

p[data-result="INVALID"]:first-of-type {
  color: red;
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>


<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Does no jQuery also mean no plain javascript? – Damon Jul 07 '16 at 16:40 — Damon, Jul 07 '16 at 16:40

Bram Vanroy · Accepted Answer · 2016-07-07T19:20:35.460

Unfortunately CSS does not have a filter selector, something like p[data-result="INVALID"]:first or p[data-result="INVALID"]:first-with-attribute. You can mimic the behaviour that you want by first setting all the corresponding items to a red color, and then make all items that are the next sibling of an identical item reverse back to black.

I would also like to point you to two issues that I have with your code: using uppercase class names, IDs, attributes, and what-have-you is confusing. Either use all lower-case, or all upper-case. Some people (especially back-end developers) like to use camel-case, but I don't like it - that is personal though. But for uniformity and manageability it is recommended to stick with one convention, and don't start mixing things up. Secondly, the b tag might not be the one you want. It used to be a very convenient tag, but is since been surpassed by the strong tag in many respects. See the following links for details:

p[data-result="INVALID"] {
  color: red
}

p[data-result="INVALID"] ~ p[data-result="INVALID"] {
    color: black;
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

will · Answer 2 · 2016-07-07T16:48:20.267

-1

I never realized that first-of-type didn't differentiate between data-attributes! You can do something like this, which will get it if it either shows up as the first item, or if there's any P tag without data-result=invalid before it.

p[data-result="INVALID"]:first-of-type, p:not([data-result="INVALID"]) + p[data-result="INVALID"]{
  styles here
}

edited Jul 07 '16 at 16:48

answered Jul 07 '16 at 16:40

will

1,947
1
13
19

That won't werk when other elements are added inbetween. [1](https://jsfiddle.net/j869utL7/1/) What you can do, is generalise the `not` selector like so [2](https://jsfiddle.net/j869utL7/2/) but it's clear that this is not quite suitable as well. (no p-tag selector, too general selector, asterisk selector is never a good start.) – Bram Vanroy Jul 07 '16 at 16:57
You're right - I think your solution is gonna be the best approach! – will Jul 07 '16 at 16:58

Select first element with data attribute

2 Answers2