CSS Attribute Selector doesn't work - css

Question

I try to select the red-colored paragraph and apply border to it. Why this piece of code is not working?
p[color="red"] {
border: 1px solid black;
}
<p style="color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: lime;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: darkgray;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: cyan;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: indigo;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
Am I missing something?
fiddle: https://jsfiddle.net/kLx1gcq0/

Answer 1

[] is a attribute selector, so you would have to select the style attribute like:
p[style*="color: red"] {
border: 1px solid black;
}
JSFiddle Demo
*= selects the element if the attribute contains the string specified. An excellent article about CSS selectors can be found here.
That works, but only if there is a whitespace. If you don't know if it will have a whitespace or not, you could do it like:
p[style*="color: red"],
p[style*="color:red"] {
border: 1px solid black;
}

Answer 2

It doesn't work since color is not an HTML attribute, which is what [color=...] matches against.
In general, inline styling is deprecated. You should use CSS for styling and the common practice is to use classes.
Try this instead:
p.red {
color: red;
border: 1px solid black;
}
p.green {
color: green;
}
p.yellow {
color: yellow;
}
p.lime {
color: lime;
}
<p class="green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="lime">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>

Answer 3

The selector p[color="red"] isn't working because the element doesn't have a color attribute. Since you're trying to match based on the style attribute, your selector could be:
Example Here
p[style="color: red;"] {
border: 1px solid black;
}
However, it's worth mentioning that this will match the attribute's value exactly, so it likely won't work all the time. You could match based on whether the value contains color: red:
p[style*="color: red"] {
border: 1px solid black;
}
However, that may not work if whitespace varies or if the value is background-color: red. Of course you could select all the different variants, but if you can, I would highly suggest avoid using the attribute selector like this. Classes are better suited for this sort of thing.

Answer 4

The attribute selectors are designed to identify HTML attributes, not CSS properties. The following may work however (untested):
p[style*="color: red;"] {
border: 1px solid black;
}
<p style="color: green;">Green text</p>
<p style="color: yellow;">Yellow text</p>
<p style="color: lime;">Lime text</p>
<p style="color: darkgray;">Dark gray text</p>
<p style="color: red;">Red text</p>
<p style="color: cyan;">Cyan text</p>
<p style="color: indigo;">Indigo text</p>

Answer 5

The selector is wrong. p[color="red"] means "a P element that have an attribute "color" with a value of "red"... but you have "style" attribute, not "color".
Take a look to css selectors: http://www.w3.org/TR/css3-selectors/#selectors

Answer 6

Yeah, so simple mistake. Obviously, color is not an html attribute.
Working solutions:
p[style*="color"][style*="red"] {
border: 1px solid black;
}
p[style*="color: red"],
p[style*="color:red"] {
border: 1px solid black;
}
Special, thanks to Jacob Gray