CSS Attribute Selector doesn't work

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

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 3

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 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