CSS Selector Not Matching

Question

For the following HTML + CSS (http://jsfiddle.net/Gb3dh/1/):

<input class="a" placeholder="here"/>
<input class="b" role="x" placeholder="there"/>

...

.a, .b {
    font-style: italic;
}

[placeholder] input[role="x"] {
    font-style=normal;
}

Why is the "font-style" of "class=b" input italic? I would've expected the second CSS selector( get any item with a placeholder title and where the input has a "title" attribute equal to "x") to be in effect.

Answer 1

Two bugs:

• There's an = in font-style=normal; where there should be a :
• [placeholder] shouldn't be before input[role="x"], the way you've done it matches an element with attribute placeholder that contains an input element with attribute role="x"

See the updated JSFiddle (or the code below): http://jsfiddle.net/Gb3dh/5/

.a, .b {
    font-style: italic;
}

input[role="x"][placeholder] {
    font-style:normal;
}