Выберите первый элемент с атрибутом данных

Question

Я хочу выбрать самое первое совпадение абзаца <p>, содержащего атрибут data-result="INVALID" с использованием css.

Я пробовал этот небольшой скрипт без каких-либо успехов. Элемент не выбран.

Я ограничен только css для этого решения (без jQuery). Есть ли решение этой проблемы?

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>

Answer 1

К сожалению, CSS не имеет выбора фильтра, что-то вроде p[data-result="INVALID"]:first или p[data-result="INVALID"]:first-with-attribute. Вы можете имитировать поведение, которое вы хотите, сначала настроив все соответствующие элементы на красный цвет, а затем сделайте все элементы, которые являются следующим братом одного и того же элемента назад, обратно на черный.

Я также хотел бы указать вам на два вопроса, которые у меня есть с вашим кодом: использование имен верхнего регистра, идентификаторов, атрибутов и того, что вас устраивает. Используйте либо нижний регистр, либо весь верхний регистр. Некоторые люди (особенно разработчики back-end) любят использовать верблюжий футляр, но мне это не нравится - это личное. Но для единообразия и управляемости рекомендуется придерживаться одного соглашения и не начинать смешивать вещи. Во-вторых, тег b может быть не тем, который вы хотите. Раньше это был очень удобный тег, но с тех пор он во многом превосходил тег strong. Смотрите следующие ссылки для получения подробной информации:

• MDN
• W3
• HTML5 Doctor

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>

Answer 2

Я никогда не понимал, что в первом из-типа не дифференцируются между данными-атрибутов! Вы можете сделать что-то вроде этого, которое получится, если оно либо появится в качестве первого элемента, либо если перед ним есть какой-либо тэг P, без data-result =.

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